Tengo una aplicación de reacción y base de fuego en la que, después de iniciar sesión correctamente, necesito mostrar el nombre de usuario y la imagen de perfil del usuario. Funciona hasta que actualizo la página. Después de actualizar, el nombre de usuario se vuelve nulo y la imagen de perfil se reduce a la imagen de perfil predeterminada .Aquí está el código para el mismo:

 const Homepage = ({user,username,setusername}) => { const [photourl,setPhotourl]=useState(profile) const [photo,setPhoto]=useState(null); const handleImageChange=(e)=>{ if(e.target.files[0]); setPhoto(e.target.files[0]); } function handleImageClick(e){ if(photo) { const photoRef=ref(storage,photourl); console.log(photoRef); uploadBytes(photoRef,photo).then(()=>{ getDownloadURL(photoRef).then((url)=>{ setPhotourl(url); }).catch((err)=>{ console.log(err); }) }).catch((err)=>{ console.log(err); }); alert("Profile Image has been changed successfully. Click OK and Wait for a second to view the changes."); } else alert("Please upload a file") } // useEffect(()=>{ // if(user && user.photoURL) // setphotourl(user.photoURL) // }) return ( <> <header> <nav> <div className="logo"><h1 className=""><a href="#">SOLRUF</a></h1></div> <div className="menu"> <h3>Welcome {username}</h3> <img className="avatar" src={photourl}/> <button >Change Username</button> </div> </nav> <main> <section> <h3>Welcome To India</h3> <h1>Do come and Visit<span className="change_content"> </span></h1> <p>"India once is not enough"</p> <input type="file" onChange={(e)=>{handleImageChange(e)}}/> <button onClick={(e)=>{handleImageClick(e)}}>Change Profile Pic</button> </section> </main> </header> </> ) } export default Homepage