Is not working w/ react-router@latest template.

[GameLord2011]

I am using the following code:

import { useEffect, useMemo, useState } from "react"; 
import Particles, { initParticlesEngine } from "@tsparticles/react"; 
import { 
  type Container, 
  type ISourceOptions, 
  MoveDirection, 
  OutMode, 
} from "@tsparticles/engine"; 
import { loadAll } from "@tsparticles/all"; 

for the imports

const App = () => { 
  const [init, setInit] = useState(false); 

  // this should be run only once per application lifetime 
  useEffect(() => { 
    initParticlesEngine(async (engine) => { 
      // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets 
      // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 
      // starting from v2 you can add only the features you need reducing the bundle size 
      await loadAll(engine); 
      //await loadFull(engine); 
      //await loadSlim(engine); 
      //await loadBasic(engine); 
    }).then(() => { 
      setInit(true); 
    }); 
  }, [])}; 
 
  const particlesLoaded = async (container?: Container): Promise<void> => { 
    console.log(container); 
  }; 

for the init,
and:

<Particles 
        id="tsparticles" 
        url="/paritcles.json" 
        particlesLoaded={particlesLoaded} 
      /> 

for the particles, my config is in /public/particles.json. The particles seem to be initializing, but there are no errors, or particles.