What is the correct way to use JSX?

Question

React

I'm using plain JSX in my React app, but the behavior is weird. The first 3 Linklook correct, but the last 3 always change display: nonei.e. they "jump". No errors, it looks like the React DOM is constantly comparing the element and updating it. I do not understand what is going on.

render() {
        const { currentUser } = this.state;

        return (
            <div>
                <Layout>
                    <Header style={{position: 'fixed', zIndex: 1, width: '100%'}}>
                        <Menu theme="dark" mode="horizontal">
                            <Menu.Item>
                                <Link to="/">Grid</Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/charts">Charts</Link>
                            </Menu.Item>
                            <Menu.Item>
                                <Link to="/onlineCharts">Online charts</Link>
                            </Menu.Item>
                            {/*<Menu.Item>*/}
                            {/*    <Link to="/profile">{currentUser.username}</Link>*/}
                            {/*</Menu.Item>*/}
                            {/*<Menu.Item>*/}
                            {/*    <a href="/" onClick={this.logOut}>*/}
                            {/*        LogOut*/}
                            {/*    </a>*/}
                            {/*</Menu.Item>*/}
                            {/*<Menu.Item>*/}
                            {/*    <Link to="/login">Login</Link>*/}
                            {/*</Menu.Item>*/}
                            {/*<Menu.Item>*/}
                            {/*    <Link to="/register">Register</Link>*/}
                            {/*</Menu.Item>*/}
                                {currentUser ? (
                                    <div>
                                        <Menu.Item>
                                            <Link to="/profile">{currentUser.username}</Link>
                                        </Menu.Item>
                                        <Menu.Item>
                                            <a href="/" onClick={this.logOut}>
                                                LogOut
                                            </a>
                                        </Menu.Item>
                                    </div>
                                ) : (
                                    <div>
                                        <Menu.Item>
                                            <Link to="/login">Login</Link>
                                        </Menu.Item>
                                        <Menu.Item>
                                            <Link to="/register">Register</Link>
                                        </Menu.Item>
                                    </div>
                                )}
                        </Menu>
                    </Header>
                </Layout>
            </div>
        )
    }
}