Вкладки не переключают отображаемые панели в всплывающем окне, когда они содержатся в панели навигации

Question

Я пытаюсь встроить формы входа и регистрации в всплывающее окно, используя response- bootstrap, но когда я использую вкладки в компоненте Navbar, панели вкладок не переключаются при нажатии.

Здесь это код, который не работает:

<Popover id="login-popover">
    <Popover.Content>
        <Tab.Container id="login-register-tabs" defaultActiveKey="login">
            <Navbar>
                <Nav>
                    <Nav.Item>
                        <Nav.Link eventKey="login" dataToggle="tab">
                            Log In
                        </Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link eventKey="register" dataToggle="tab">
                            Register
                        </Nav.Link>
                    </Nav.Item>
                </Nav>
            </Navbar>
            <Tab.Content>
                <Tab.Pane eventKey="login">
                    <LogInForm/>
                </Tab.Pane>
                <Tab.Pane eventKey="register">
                    <RegisterForm/>
                </Tab.Pane>
            </Tab.Content>
        </Tab.Container>
    </Popover.Content>
</Popover>

Вкладки отображаются правильно над компонентом LoginForm, но щелчок по вкладке register не переключает на RegisterForm составная часть. Если я удалю окружающие теги <Navbar>, вкладки можно будет использовать для успешного переключения отображаемой формы. Проблема без компонента навигационной панели заключается в том, что вкладки расположены вертикально и плохо стилизованы.

Как я могу заставить вкладки переключать визуализированную форму, находясь в компоненте <Navbar>?