Флажок React Bootstrap в Nav -> NavItem не перерисовывается при нажатии

У меня есть своеобразная проблема с использованием Nav и NavItem с флажком из React Bootstrap. Дело в том, что если я нажму непосредственно на флажок, а не на кнопку NavItem, флажок не будет отображаться правильно, но мое состояние обновилось.

Пример: Учитывая приведенный ниже код, я визуализирую компонент и нажимаю непосредственно на флажок. В этом случае showMap будет установлено на false, так как мы установили его на true в конструкторе, но флажок по-прежнему будет установлен в представлении html. Однако, если я нажму на NavItem, но не непосредственно на флажок, состояние showMap обновится правильно, а также вид.

https://react-bootstrap.github.io/components.html#navs

import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinkContainer } from 'react-router-bootstrap';
import { Col, Nav, NavItem, Checkbox } from "react-bootstrap";

interface IProps {

}

interface IState {
    showMap: boolean
}

export class Menu extends React.Component<IProps, IState> {
    constructor(props: any) {
        super(props);
        this.state = {
            showMap: true
        }
    }

    toggleCheckbox = (event: any) => {
        event.preventDefault();
        this.setState({ showMap: !this.state.showMap });
    }

    render() {
        return (
            <div>
                <Nav bsStyle="tabs" activeKey="1">
                    <LinkContainer to="/test">
                        <NavItem eventKey="1">Test</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/test2">
                        <NavItem eventKey="2">Test2</NavItem>
                    </LinkContainer>
                    <NavItem eventKey="3" onClick={this.toggleCheckbox}><Checkbox name="showMap" inline checked={this.state.showMap} readOnly >
                    Show Map </Checkbox></NavItem>
                </Nav>
            </div>
        )
    }
}

Обновление:

Пробовал и так, результат тот же:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinkContainer } from 'react-router-bootstrap';
import { Navbar, Nav, NavItem, Checkbox } from "react-bootstrap";

interface IProps {

}

interface IState {
    showMap: boolean
}

export class Menu extends React.Component<IProps, IState> {
    constructor(props: any) {
        super(props);
        this.state = {
            showMap: true
        }
    }

    toggleCheckbox = (event: any) => {
        event.preventDefault();
        this.setState({ showMap: !this.state.showMap });
    }

    render() {
        return (
            <div>
                <Navbar>
                    <Nav bsStyle="tabs" activeKey="1">
                        <LinkContainer to="/test">
                            <NavItem eventKey="1">Test</NavItem>
                        </LinkContainer>
                        <LinkContainer to="/test2">
                            <NavItem eventKey="2">Test2</NavItem>
                        </LinkContainer>
                        <NavItem eventKey="5" onClick={this.toggleCheckbox}><input type="checkbox" name="showMap"
                            checked={this.state.showMap} readOnly />Show map</NavItem>
                    </Nav>
                   </Navbar>
            </div>
        )
    }
}