Не работает p5.js в React.js

Пытаюсь сделать себе фон из следующего скетча https://openprocessing.org/sketch/1957947

преобразовал код к следующему виду:

import Sketch from 'react-p5'
import frag from './basic.frag'
import vert from './basic.vert'

function Background(){
  let myShader;

  const preload = (p5) => {
    myShader = p5.loadShader(vert, frag);
  };

  const setup = (p5) => {
    p5.createCanvas(p5.windowWidth, p5.windowHeight, p5.WEBGL);
    p5.pixelDensity(1);
    p5.background(100);

    p5.shader(myShader)
  };

  const draw = (p5) => {
    myShader.setUniform('u_resolution', [p5.width, p5.height]);
    myShader.setUniform('u_time', p5.millis() / 500);

    p5.rect(0, 0, p5.width, p5.height);
  };

  const windowResized = (p5) => {
    p5.resizeCanvas(window.innerWidth, window.innerHeight);
  }
  return <Sketch preload={preload} setup={setup} draw={draw} windowResized={windowResized} />
}
export default Background;

после чего стандартный импорт в моё приложение React:

import Background from "../Backgrounds/Background"

...
const Home = () => {
return(
...
<Background />
...
)
}
export default Home

однако хотя ошибок и нет, но в тоже время ничего не отображается. Не пойму в чём проблема