Particle js is not loading

I am currently working on a personal react project that involves particle.js, which is a library for creating interactive backgrounds. However, as I am watching some Udemy videos to learn how to use it, I encounter a problem: it’s not showing any particles on my screen.

App.js

import './App.css';
import { Routes, Route, useLocation } from 'react-router-dom'
import Particles from 'react-tsparticles';
import { loadFull } from 'tsparticles';
import Home from './containers/home';
import About from './containers/about';
import Skills from './containers/skills';
import Resume from './containers/resume';
import Portfolio from './containers/portfolio';
import Contact from './containers/contact';
import Navbar from './components/navBar';
import particlesConfig from "./helpers/particlesConfig";


function App() {

    const particlesInit = async (main) => {
        await loadFull(main);
    };

    const location = useLocation();
    const renderParticleJsIfCurrentPageIsHomePage = location.pathname === "/";

    return (
        <div className="App">
            {renderParticleJsIfCurrentPageIsHomePage && (
                <Particles
                    id="particles"
                    options={particlesConfig}
                    init={particlesInit}
                />
            )}

            <Navbar />

            <Routes>
                <Route path='/' index element={<Home />} />
                <Route path='/about' element={<About />} />
                <Route path='/skills' element={<Skills />} />
                <Route path='/resume' element={<Resume />} />
                <Route path='/portfolio' element={<Portfolio />} />
                <Route path='/contact' element={<Contact />} />
            </Routes>
        </div>
    );
}

export default App;

particlesConfig.js

export default {
    background: {
      color: {
        value: "#1d1d1d",
      },
    },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: {
          enable: true,
          mode: "push",
        },
        onHover: {
          enable: true,
          mode: "repulse",
        },
        resize: true,
      },
      modes: {
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    particles: {
      color: {
        value: "red",
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: true,
        opacity: 0.5,
        width: 1,
      },
      collisions: {
        enable: true,
      },
      move: {
        direction: "none",
        enable: true,
        outModes: {
          default: "bounce",
        },
        random: false,
        speed: 6,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          area: 800,
        },
        value: 80,
      },
      opacity: {
        value: 0.5,
      },
      shape: {
        type: "circle",
      },
      size: {
        value: { min: 1, max: 5 },
      },
    },
    detectRetina: true,
  };

I installed
npm packages but it didn’t help.