I was trying to make a simple d3 Data-Driven Documents pie chart with React hooks along with Nextjs and a tailwindcss.

Just trying to render a list of items that is Number of people registered the application and Number of people onBoarded in the pie chart, it keeps throwing this error indicating it's undefined.

Here's my code, Please let me know know if I'm doing anything wrong.

/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>
);