React Require auth problem as like secure page problem single page offline login works but not redirect work

Question

When I set up require auth state its works but when it redirects the page it doesn't work. Pages show empty. When I reload then it shows again.

import React from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import { Navigate, useLocation } from 'react-router-dom';
import auth from '../../hooks/RequireAuth/RequireAuth';

const RequireAuth = ({children}) => {
    const [user, loading] = useAuthState(auth);
    const location = useLocation();
    if(!user){
        return <Navigate to='/login' state={{from:location}} replace></Navigate>
    }
    return children;
};

export default RequireAuth;

<Route Route path='/uploadPd' element={
  <RequireAuth>
    <UploadProduct></UploadProduct>
  </RequireAuth>
}></Route >

error message --

index.ts:105 Uncaught TypeError: (0 , firebase_util__WEBPACK_IMPORTED_MODULE_0_.getModularInstance)(...).onAuthStateChanged is not a function at onAuthStateChanged (index.ts:105:1)

The above error occurred in the component: