Tengo este componente Gráfico. useEffect funciona como componentDidMount() , por lo que primero debe representar el DOM y luego llamar a fetchChartData . Pero el problema al que me enfrento aquí es que obtengo un null en console.log("111111111", document.getElementById("data-consumed")) al principio y luego obtengo los elementos DOM y, como resultado, obtengo un error de Highcharts

 Uncaught (in promise) Error: Highcharts error #13

Entonces, necesito saber por qué sucede esto, ya que useEffect funciona como componenteDidMount y debería representar el DOM primero.

 const Chart2 = (props) => { const fetchChartData = async () => { const { fetchChartData } = props; const startDate = moment().startOf("year").toISOString(); const endDate = moment().endOf("year").toISOString(); const data = await fetchChartData({ startDate, endDate, userId: "XXXXXXX" }); console.log("111111111", document.getElementById("data-consumed")) Highcharts.chart("data-consumed", { chart: { type: "column", }, title: { text: null, }, subtitle: { text: "Source: WorldClimate.com", }, xAxis: { categories: data.map(({ _id }) => _id), crosshair: true, }, yAxis: { min: 0, title: { text: "Rainfall (mm)", }, }, plotOptions: { column: { pointPadding: -0.1, borderWidth: 0, color: "#5036D6", }, }, series: [ { name: null, data: data.map(({ processingStorage }) => processingStorage), }, ], }); }; useEffect(() => { fetchChartData(); }, []); return ( <div className="chart-container cursor-pointer"> <div className="chart-block"> <h4>Data Consumed</h4> <div id="data-consumed" className="graph-block" /> </div> </div> ); }; export default Chart2;