Estaba tratando de hacer un gráfico circular simple Data-Driven Documents d3 con hooks React junto con Nextjs y un tailwindcss.

Al tratar de representar una lista de elementos que es Number of people registered the application y Number of people onBoarded en el gráfico circular, sigue arrojando este error que indica que no está undefined .

Aquí está mi código, avíseme si estoy haciendo algo mal.

 /pages/dashboard/index.js import {useState, useRef, useEffect} from "react"; import * as d3 from 'd3'; function Index() { const [data, setData] = useState([ {type: 'registered', value: 40}, {type: 'onboarded', value: 32}, ]); const svgRef = useRef(); useEffect(() => { //setting up svg container const w = 320; const h = 330; const radius = w / 2; const svg = d3.select(svgRef.current) .attr('width', w) .attr('height', h) .style('overflow', 'visible') //setting up chart const formattedData = d3.pie().value(d => d.value)(data); const arcGenerator = d3.arc().innerRadius(0).outerRadius(radius); const color = d3.scaleOrdinal().range(d3.schemaSet2); //setting up svgData svg.selectAll() .data(formattedData) .join('path') .attr('d', arcGenerator) .attr('fill', d => color(d.value)) .attr('opacity', 0.7) //setting up annotation svg.selectAll() .data(formattedData) .join('text') .text(d => d.data.property) .attr('transform', d => `translate(${arcGenerator.centroid(d)})`) .style('text-anchor', 'middle'); }, [data]) return ( <div className="md:col-span-2 lg:col-span-1"> <div className="h-full py-4 px-4 space-y-6 rounded-xl border border-light bg-white"> <svg className="w-40 m-auto opacity-75" ref={svgRef}></svg> <div> <h5 className="text-xl text-gray-600 text-center">Number of people registered</h5> </div> </div> </div> );