I have a componentDidMount function which checks wether the user is logged or not by calling an API

This is my summed up code layout:

state = {
    login: false
};       

componentDidMount() {
    fetch('api/login/userislogged', {
        method: 'GET'
    })
    .then(response => response.json())
    .then(data => {
        this.setState({ login: data })
    })
}

 render() {
    return (
        <div>
            {!this.state.login ? <LoginComponent childToParent={this.childToParent}/>
                :
                <>
                    <NavMenu/>
                    <Container>
                        ...
                        ....
                    </Container>
                </>
            }
        </div>
    );
}

// this function gets back the login form response to set the login state to true if it was successful
childToParent = (childData) => {

    if (childData) {
        this.setState({ login: true })
    }
    else {
        this.setState({ login: false })
    }

};
   

The problem is that when the page first loads and the user is logged, the state.login is false, so for a brief millisecond it shows the login form, then when the function gets the api result back and sets the state.login to true, the component re-renders the page correctly without the login form.

Is there any better solution? thanks for the answers <3