Estoy tratando de crear una aplicación React con un solo boceto p5.js. Sin embargo, el componente que contiene el boceto p5 se duplica en mi página. No estoy seguro de por qué se representaría de esta manera.

Aquí puedes ver el código: https://stackblitz.com/edit/react-ts-kocwqw?file=App.tsx,Sketch.tsx,index.tsx

Aquí está la definición de componentes de reacción:

Aplicación.tsx

 import React = require('react'); import Sketch from './Sketch'; function App() { return ( <div className="App"> <Sketch /> </div> ); } export default App;

Bosquejo.tsx

 import React = require('react'); import { useEffect } from 'react'; import p5 from 'p5'; const Sketch = () => { const p = (p5: any) => { let radius: number; p5.setup = () => { p5.createCanvas(p5.windowWidth / 2, p5.windowHeight / 2); p5.background(0); radius = 0; }; p5.draw = () => { p5.ellipse(p5.width / 2, p5.height / 2, radius, radius); if (radius < 70) radius++; }; }; useEffect(() => { new p5(p); }, []); return <></>; }; export default Sketch;

índice.tsx

 import * as React from 'react'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render( <StrictMode> <App /> </StrictMode> );

¿Qué me podría estar perdiendo aquí?