He estado tratando de agregar un gráfico de barras a un componente React y usé este tutorial de YouTube para ello. yo uso react-chartjs-2

Mi componente se ve así:

 import React, { useEffect, useState } from "react"; import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, } from 'chart.js'; import { Bar } from 'react-chartjs-2'; ChartJS.register( CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend ); const Daily = () => { const [chartData, setChartData] = useState({ datasets: [], }) const [chartOptions, setChartOptions] = useState({ datasets: [], }) useEffect(() => { setChartData({ labels: [1,2,3,4,5,6,7], datasets: [ { label: 'e', data: [2,6,3,8,4,6,77], } ] }); setChartOptions({ responsive: true, plugins : { legend: { position: "top", }, title: { display: true, text: 'eh' } } }) }, []) return ( <div className="Daily"> <Bar data={chartData} options={chartOptions} /> </div> ); }; export default Daily;

Aunque seguí el tutorial exactamente, recibo muchos errores en la consola y no aparece ningún gráfico. Los errores son:

• Advertencia: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
• Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
• Podrías estar rompiendo las Reglas de los Hooks
• Es posible que tenga más de una copia de React en la misma aplicación Consulte https://reactjs.org/link/invalid-hook-call para obtener consejos sobre cómo depurar y solucionar este problema.
• TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'useRef')
• react-dom.development.js:18687 El error anterior ocurrió en el componente <ForwardRef(ChartComponent)>:

Mis versiones de React y React DOM son "react": "^18.2.0", "react-chartjs-2": "^4.2.0", "react-dom": "^18.2.0", por lo que parecen para coincidir y me pregunto por qué recibo el error. useRef tampoco se menciona en ninguna parte.

¿Alguien tuvo un problema similar?