Событие onClick не срабатывает на функциональном элементе

На всю жизнь я не могу понять, почему событие щелчка не срабатывает в моем функциональном компоненте.

Вот мой компонент:

import React, { useState, useEffect } from 'react';
import {
    Collapse,
    Navbar,
    NavbarToggler,
    Nav,
    NavItem,
    NavLink,
} from 'reactstrap';

import classNames from 'classnames';
import img from '../../img/logo/logo-white.svg';

const NavBar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => {
        console.log('toggllling', isOpen);
        setIsOpen(!isOpen);
    };

    return (
        <div
            id="nav-wrap"
            className={classNames({ 'bg-dark-blue': isOpen })}
        >
            <Navbar color="transparent" dark expand="lg" className="container">
                <a className="navbar-brand" href="/">
                    <img alt="logo light" src={img} />
                </a>
                <NavbarToggler onClick={toggle} />
                <Collapse isOpen={isOpen} navbar>
                    <Nav className="navbar-nav" navbar>
                        <NavItem className="active">
                            <NavLink href="/">First</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="/">second</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="/">Thord</NavLink>
                        </NavItem>
                        <NavItem className="separated">
                            <NavLink href="/">Fourth</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="/">fifth</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="/" className="btn btn-light">last</NavLink>
                        </NavItem>
                    </Nav>
                </Collapse>
            </Navbar>
        </div>
    );
};

export default NavBar;

Это немного более продвинутая версия примера переключения панели навигации со страницы reactstrap: https://reactstrap.github.io/components/navbar/

Из React Devtools я вижу, что событие привязано к правильному компоненту реакции. Если я заменю toggle чем-то, что должно срабатывать немедленно, как вызов функции, то он срабатывает немедленно. Но когда я нажимаю на настоящую кнопку, ничего не происходит. Я даже привязал событие щелчка к документу, чтобы увидеть, есть ли что-то скрытое над кнопкой, и вышел из системы, если событие распространяется на правильный элемент - так оно и было. так что, убей меня, я не могу понять, почему функция переключения никогда не срабатывает и почему я никогда не вижу «переключение» в своей консоли. Я также пытался добавить этот onClick к любому другому элементу в компоненте, и он никогда не работает внутри компонента.

Возможно, это что-то очень маленькое, чего мне здесь не хватает, но хоть убей — я не могу понять, что именно. Не знаю, какая еще информация может быть здесь полезна. Возможно, как я использую компонент:

ready(() => {
    // Example:
    const wrap = document.getElementById('nav-wrap');
    if (wrap) {
        // perform element replacement
        const parent = wrap.parentNode;
        const temp = document.createElement('div');
        render(<NavBar element={wrap} />, temp);
        parent.replaceChild(temp.querySelector('div#nav-wrap'), wrap);
    }
});

Редактировать:

Я упростил компонент, и результаты те же — событие не срабатывает. Когда я отлаживаю его с помощью инструментов разработчика браузера и добавляю точку останова по щелчку мыши, я вижу, что вызов функции заканчивается в react-dom.development.js function noop() {} Почему это так?