how to setup particle-wave background in reactJS

import ParticleWave from 'particle-wave';

const pointSize = 4

const pw = new ParticleWave(document.getElementById('particle-wave'), {
    uniforms: {
        size: { type: 'float', value: pointSize },
        field: { type: 'vec3', value: [0, 0, 0] },
        speed: { type: 'float', value: 7 }
    },
    onResize(w, h, dpi) {
        const position = []
        const color = []
        const width = 400 * (w / h)
        const depth = 500
        const height = 7
        const distance = 9
        for (let x = 0; x < width; x += distance) {
            for (let z = 0; z < depth; z += distance) {
                position.push(-width / 2 + x, -30, -depth / 2 + z)
                color.push(0, 1 - (x / width) * 1, 0.5 + x / width * 0.5, z / depth)
            }
        }
        if (this.uniforms) {
            this.uniforms.field = [width, height, depth]
            this.uniforms.size = (h / 400) * pointSize * dpi
        }
        if (this.buffers) {
            this.buffers.position = position
            this.buffers.color = color
        }
    }
})

document.getElementById('clear').onclick = function () {
    console.log('ParticleWave will clear', pw)
    pw.clear()
}

export default ParticleWave;

import { Routes, Route } from 'react-router-dom';
import './App.scss';
import Navbar from './components/navBar';
import Home from './containers/home';
import Blog from './containers/blog';
import Portfolio from './containers/portfolio';
import About from './containers/about';
import Contact from './containers/contact';
import Theme from './components/theme';
import ParticleWave from './helpers/ParticleWave';

function App() {


  return (
    <div className="App">
      <div className='App__navbar-wrapper'>
        <Navbar />
      </div>

      <div id='particle-wave'>
        <ParticleWave />
      </div>
      <div className='App__main-content-wrapper'>
        <Theme />
        <Routes>
          <Route path='/' index element={<Home />} />
          <Route path='/blog' index element={<Blog />} />
          <Route path='/portfolio' index element={<Portfolio />} />
          <Route path='/about' index element={<About />} />
          <Route path='/contact' index element={<Contact />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;