When I refresh my page Home Page (private route) user data becomes null in firebase authentication

it works fine when you login or register for first time and you are redirected to Home page but when you try to refersh home page it shows TypeError: Cannot read properties of null (reading 'email') in Home.js

App.js file(below one) :

function App() {
  

  let authentication =  getAuth();
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
   const [user, setUser] = useState(null);

  useEffect(() => {

     onAuthStateChanged(authentication, (ur)=>{
      if(ur){
        console.log(ur);
        setUser(ur);
        console.log(ur.email);
        navigate('/home');
      }
      else{
        
        navigate('/roothome');
      }

    })
    
  }, [])
 

Home js

export default function Home(props) {
   let navigate = useNavigate();
  
    useEffect(()=>{

        if (props.user) {
            console.log(props.user)
            navigate('/home')
        }

        if (!(props.user)) {
            navigate('/login')
        }

    },[])
    return (
        <div>
            <h1>{`Welcome ${props.user.email}`} </h1>
        </div>
    )
}