let or React.useRef: what is the best approach?

I'm developing a REACT JS app and I've a doubt. If I have something that must not be taken as a dependency i usually put a let like in this case, where I'm initializing Firebase for my app:

import { initializeApp } from 'firebase/app';
import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check';

let app = null;

const useInitializeFirebase = () => {
  if (app) {
    return;
  }

  app = initializeApp(window.FIREBASE);

  initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(window.RECAPTCHA_SITE_KEY),
    isTokenAutoRefreshEnabled: true,
  });
};

export default useInitializeFirebase;

The so exported hook is called within the main index.js file in this way:

const App = () => {
  useInitializeFirebase();

  ...

}

So if the hook gets called multiple times (e.g. for a re-render), Firebase won't give error.

Is this the best approach? Or maybe I should use useRef or useState or even something else?

EDIT

The problem occurs also if I don't use an hook.
Take this code as reference:

import { initializeApp } from 'firebase/app';

let firebaseApp = null;

export default (firebaseConfig) => {
  if (firebaseApp === null) {
    firebaseApp = initializeApp(firebaseConfig);
  }

  return firebaseApp;
};

That can be used in this way

import { getAuth, signInWithCustomToken } from 'firebase/auth';
import firebaseApp from '@Src/helpers/firebaseApp';

const firebaseLogin = (token) => {
  const auth = getAuth(firebaseApp(window.FIREBASE));
  return signInWithCustomToken(auth, token);
};

export { firebaseLogin };

In this way if I don't put a guard firebase would be initialized multiple times, giving error.