Toogle state react react hooks

Question

I'm trying to do a conditional rendering using hooks. I use different component for each screen, and I would like to be able to toggle the state from the "parent" component using hooks. How can I do this ?

import React from "react";
import {
    useState
} from "react";
import "../App.css";

export default function Auth() {
    const [hasAccount, setHasAccount] = useState(false);
    const toogleHasAccount = () => {
        console.log("toogleHasAccount");
        setHasAccount((hasAccount) => !hasAccount);
    };

    if (hasAccount) {
        return <LoginScreen / > ;
    }
    return <SignUpScreen / > ;
}

function SignUpScreen() {
    return ( <
        div className = "App" >
        <
        div > SignUpScreen < /div> <
        button onClick = {
            this.toogleHasAccount()
        } > Toggle State < /button> <
        /div>
    );
}

function LoginScreen() {
    return ( <
        div >
        <
        div > LoginScreen < /div> <
        button onClick = {
            () => this.toogleHasAccount()
        } > Sign Out < /button> <
        /div>
    );
}