How to solve useEffect running twice?

Question

I'm trying to run this only once on load, however, due to React.StrictMode I'm being told it's running twice. I've tried a few recommended solutions however none have worked. what do I need to do so it only runs once?

const query = useCallback(async () => {
    setLoading(true);
    try {
      console.log("Starting game in async")
      window.Phaser = await import('phaser')
      const Boot = await import('./bankPanicScenes/Boot.js')
      const Preloader = await import( './bankPanicScenes/Preloader.js')
      const MainMenu = await import( './bankPanicScenes/MainMenu.js')
      const MainGame = await import( './bankPanicScenes/Game.js')

      const config = {
        type: Phaser.AUTO,
        gameTitle: "Bank Panic",
        parent: "game-bankpanic",
        autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
        autoFocus: true,
        fps: {
          target: 60,
        },
        physics: {
          default: "arcade",
          arcade: {
            gravity: { y: 200 },
            debug: false,
          },
        },
        backgroundColor: "#282c34",
        scale: {
          mode: Phaser.Scale.ScaleModes.NONE,
        },
        scene: [Boot, Preloader, MainMenu, MainGame],
      }
      game.current = new Phaser.Game(config)
      console.log("Game loaded")
    } catch (e) {
      console.log(e)
    } finally {
      setLoading(false);
      console.log('Loading Finished')
      
    }
  }, [])

  useEffect(() => {
    query()
  }, [])