how to include p5js into react

App.js

import "./App.css";
import p5 from "p5";
import { useEffect } from "react";

const myOwnSketch = (sketch) => {
  // the function s can be outside a react function since it's not actually react
  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = () => {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x, y, 50, 50);
  };
};

function App() {
  useEffect(() => {
    const sketchRef = document.getElementById("sketch1");
    //
    new p5(myOwnSketch, sketchRef);
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <div id="sketch1"></div>
      </header>
    </div>
  );
}

export default App;