Событие 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;

Это немного более продвинутая версия примера переключения навигационной панели со страницы responsestrap: 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);
    }
});

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

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