i stucked at this error even thought i get desired output but at every save or refresh of code this error is get . i have use particles.js in my react application

Compiled with problems:
×
ERROR
[eslint]
srcutils.jsparticles.js
Line 660:5: ‘cancelRequestAnimFrame’ is not defined no-undef
Line 661:5: ‘cancelRequestAnimFrame’ is not defined no-undef
Line 1239:5: ‘pJSDom’ is not defined no-undef

Search for the keywords to learn more about each error.

My relative code is :
particle1.js:

let cancelRequestAnimFrame = (requestID) => {
    if (window.cancelAnimationFrame) {
      window.cancelAnimationFrame(requestID); 
    } else if (window.webkitCancelAnimationFrame) {
      window.webkitCancelAnimationFrame(requestID); 
    } else if (window.mozCancelRequestAnimationFrame) {
      window.mozCancelRequestAnimationFrame(requestID); 
    } else if (window.msCancelRequestAnimationFrame) {
      window.msCancelRequestAnimationFrame(requestID); 
    }
  };
  
  let pJSDom = []; 
  

export const particlesConfig = {
    "particles": {
        "number": {
            "value": 72,
            "density": {
                "enable": true,
                "value_area": 800
            }
        },
        "color": {
            "value": "#b9bd22"
        },
        "shape": {
            "type": "circle",
            "stroke": {
                "width": 0,
                "color": "#000000"
            },
            "polygon": {
                "nb_sides": 5
            },
            "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
            }
        },
        "opacity": {
            "value": 0.5,
            "random": true,
            "anim": {
                "enable": true,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
            }
        },
        "size": {
            "value": 4,
            "random": true,
            "anim": {
                "enable": true,
                "speed": 40,
                "size_min": 0.1,
                "sync": true
            }
        },
        "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
        },
        "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
            }
        }
    },
    "interactivity": {
        "detect_on": "window",
        "events": {
            "onhover": {
                "enable": true,
                "mode": "repulse"
            },
            "onclick": {
                "enable": true,
                "mode": "push"
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 400,
                "line_linked": {
                    "opacity": 1
                }
            },
            "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
            },
            "repulse": {
                "distance": 200,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 4
            },
            "remove": {
                "particles_nb": 2
            }
        }
    },
    "retina_detect": true,
    "cancelRequestAnimFrame": cancelRequestAnimFrame,
    "pJSDom": pJSDom
};        

(i tried to self declare both still confused)

App.js :

{/*Imp lib*/}
import Particles from "react-tsparticles";
import { useCallback } from "react";
import { loadFull } from "tsparticles";
import { particlesConfig } from './utils.js/particles1';
function App() {
const particlesInit = useCallback(async (engine) => {
    console.log(engine);
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(async (container) => {
    await console.log(container);
  }, []);
  return (
    <div className="App">
      {/* Particles js */}
      
      <Particles
        id="tsparticles" 
        init={particlesInit}
        loaded={particlesLoaded}
        options={particlesConfig}  // Use the imported config
      />
      );
}    

i tried to selfdeclare i tried varios another methods to give it refrence