useRef.current is undefined even in useEffect hook

I am a beginner to react and react-native. I am trying to set up Firebase for analytics. I am using react-native-redux with react-native-redux-persist. Also using react-naviagation.

The code from App.js in my react native app:

const App = () => {
  const routeNameRef = React.useRef(null);
  const navigationRef = React.useRef(null);

  React.useEffect(() => {
    console.log('hrhr');
    console.log(routeNameRef);
    console.log(navigationRef);
    const state = navigationRef.current.getRootState();

    // Save the initial route name
    routeNameRef.current = getActiveRouteName(state);
  }, []);

  return (
    <Provider store={persistStore.store}>
      <PersistGate loading={null} persistor={persistStore.persistor}>
        <NavigationContainer
          ref={navigationRef}
          onStateChange={state => {
            const previousRouteName = routeNameRef.current;
            const currentRouteName = getActiveRouteName(state);

            if (previousRouteName !== currentRouteName) {
              // The line below uses the @react-native-firebase/analytics tracker
              // Change this line to use another Mobile analytics SDK
              analytics().setCurrentScreen(currentRouteName, currentRouteName);
            }

            // Save the current route name for later comparision
            routeNameRef.current = currentRouteName;
          }}>
           {/***/}
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
};

Logs:

LOG  hrhr
LOG  {"current": undefined}
LOG  {"current": undefined}

Versions:

"react": "16.13.1",
"react-native": "0.61.5",

The app also has dependencies on react native redux and firebase.

UPDATE

useEffect is sometimes being called on loop after the app reloads, even though I am passing an empty array in useEffect().

UPDATE

After removing PersistGate JSX tags, it works fine. Please let me know how can I fix this.