Soy bastante nuevo en React y tengo problemas para obtener un objeto JS para renderizar a través de useRef y useEffect.

El método de renderizado JS es el siguiente:

 import { Compass } from "steelseries"; const compass = new Compass(document.querySelector("#myCanvas"), { size: 200 });

Usando una plantilla para representar un gráfico de chart.js, he intentado representar esto a través de React con mecanografiado.

El método de procesamiento de reacción es el siguiente:

 import { useCallback, useEffect, useRef } from "react" import { observer } from "mobx-react" import { Compass } from "steelseries" type GaugeIndicatorProps = { value: 200 } export const Gauge = observer(({ value }: GaugeIndicatorProps) => { const canvasEl = useRef() as React.MutableRefObject<HTMLCanvasElement> const chartRef = useRef<Compass | null>() const createChart = useCallback(() => { const chartCanvas = canvasEl.current.getContext("2d") if (!chartCanvas) { return } chartRef.current = new Compass(chartCanvas, value) }, [value]) useEffect(() => { if (!chartRef.current) { createChart() } }, [createChart]) return ( <div className={`canvas`}> <canvas className="top-chart" ref={canvasEl} /> </div> ) })

No estoy seguro de cómo hacer que esto se procese, porque el objeto de la brújula quiere un Canvas | Cadena | HTMLCanvasElement, que he intentado pasarle usando React.MutableRefObject y getcontext("2d"), pero dice el siguiente error para chartCanvas en esta línea de código: chartRef.current = new Compass(chartCanvas, value)

El argumento de tipo 'CanvasRenderingContext2D' no se puede asignar al parámetro de tipo 'cadena | HTMLCanvasElement'. Al tipo 'CanvasRenderingContext2D' le faltan las siguientes propiedades del tipo 'HTMLCanvasElement': alto, etc.

Lo siento si esta es una pregunta de novato.

Gracias por su apoyo.

Cristóbal