This comparison appears to be unintentional because the types '{ loading: Boolean; }' and 'boolean' have no overlap – Reactjs

I am trying to set a loading state for my application with Typescript.

   const [loading,loadingupdate] = useState<Boolean>(false)

 
      return ( 
        {
                loading === true ? <></> : <>
                <div className={` ${skin} bigcontainer`}>
                    <div className="main-consign">
                        <h1 className="labelauth">{label}</h1>

                    <Meat label={label} model={model} passworderror={passworderror} emailerror={emailerror} usernameerror={usernameerror} username={usernameupdate} password={passwordupdate} email={emailupdate}/>

                        <button className="submitsign" onClick={()=>{loadingupdate(!loading),submit()}}>Submit</button>

                    <div className="linksign" onClick={()=>{label === authlabels.login ? navagate('/Signup') : navagate('/Login')}}>{label === authlabels.signup ? 'Aready SignedUP?' : 'No account?'}</div>
                    </div>
                </div>
            </>
        }
    );

I wanted my code to show nothing when it equals false. When I press my signup button in the render it will fetch data and when the fetch responds it will change the boolean after it responds so it won’t always equal to false.

like this:

      async function submit(){
        if(label === authlabels.login){
            console.log(`This is password: ${password} n This is username: ${username}`)

        }else{
            console.log(`This is email: ${email} n This is password: ${password} n This is username: ${username}`)

             
            
            const body:any = {
                email: email,
                password: password,
                username: username
            }

            const options: any = optionsMaker(body)

            await fetch('http://localhost:5000/signUp',options).then(response=>{
                //console.log(response)// this is response from server, including all ok and error responses 
                if(response.ok)
                    setTimeout(()=>{
                        loadingupdate(!loading)
                    },2000)
                else{
                    setTimeout(()=>{
                        console.log(`hi ${loading}`)
                        loadingupdate(!loading)
                    },2000)

                    response.json().then((response)=>{console.log(response)}) 

                }
            })

            
        }
      }
      

It also gives the error that my state will always be equal to false but it will change after the fetch typescript is wrong.