You initialize your
currentUser state variable with a null value:
const [currentUser, setCurrentUser] = useState(null)
This means that
currentUser is always initially null when the page is first loaded. The prior user object isn’t known for sure until some time later, after it’s asynchronously loaded by the Firebase SDK. Your code needs to be ready for this. If you require that a user be signed in before rendering your component, you should wait for the first time
onAuthStateChanged triggers with an actual user object.
You can read more about this behavior of the Firebase Auth SDK in this blog.
CLICK HERE to find out more related problems solutions.