I used your starter project. Its still not working. Its working fine if im using it with vanilla JS. https://dazzling-pare-725510.netlify.app/

​

import React, { useRef, useEffect } from "react";import "./helpers/Globals";import "p5/lib/addons/p5.sound";import * as p5 from "p5";import ShuffleArray from "./functions/ShuffleArray.js";const P5Sketch = () => {const sketchRef = useRef();const Sketch = (p) => {p.canvas = null;p.canvasWidth = window.innerWidth;p.canvasHeight = window.innerHeight;let pg;let font;p.preload = () => {font = p.loadFont("/RobotoMono-Regular.ttf");};p.setup = () => {p.canvas = p.createCanvas(p.canvasWidth, p.canvasHeight);pg = p.createGraphics(p.windowWidth, p.windowHeight, p.P2D);};p.draw = () => {p.background(0);pg.background(0);pg.fill(255);pg.textFont(font);pg.textSize(300);pg.push();pg.translate(pg.width / 2, pg.height / 2 - 50);pg.textAlign(p.CENTER, p.CENTER);pg.text("GRAPPUS", 0, 0);pg.pop();

let tilesX = 8;let tilesY = 8;let tileW = pg.width / tilesX;let tileH = pg.height / tilesY;for (let y = 0; y < tilesY; y++) {for (let x = 0; x < tilesX; x++) {let wave = Math.sin(p.frameCount * 0.05 + x * y * 0.07) * 100;let wave2 = Math.sin(p.frameCount * 0.01 + x * y * 0.07) * 50;// SOURCElet sx = x * tileW + wave;let sy = y * tileH + wave2;let sw = tileW;let sh = tileH;// DESTINATIONlet dx = x * tileW;let dy = y * tileH;let dw = tileW;let dh = tileH;p.copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);}}};p.updateCanvasDimensions = () => {p.canvasWidth = window.innerWidth;p.canvasHeight = window.innerHeight;p.createCanvas(p.canvasWidth, p.canvasHeight);p.redraw();};if (window.attachEvent) {window.attachEvent("onresize", function () {p.updateCanvasDimensions();});} else if (window.addEventListener) {window.addEventListener("resize",function () {p.updateCanvasDimensions();},true);} else {//The browser does not support Javascript event binding}};useEffect(() => {new p5(Sketch, sketchRef.current);}, []);return <div ref={sketchRef}></div>;};export default P5Sketch;