So I am trying to generate a Choropleth using a topoJSON file. but the map is not being generated properly. Can anyone help me with it? The Map is getting skewed.[![enter image description here]

You can see the data here: https://raw.githubusercontent.com/mrbrownstone07/geoJson/main/bangladesh_electorial_data.json

This is the code for my map compotent.

const BangladeshMapChart = () => {
    const { data, error } = useSWR(
        'https://raw.githubusercontent.com/mrbrownstone07/geoJson/main/bangladesh_electorial_data.json',
        fetcher,
        { revalidateOnFocus: false } // Optional: cache for 2 days
    );

    const [chartData, setChartData] = useState(null);

    useEffect(() => {
        if (!data) return;

        // const features = data.features;
        const features = ChartGeo.topojson.feature(data, data.objects.regions).features;
        // Ensure there are features in the data
        if (!features || features.length === 0) {
            console.error("No features found in GeoJSON data.");
            return;
        }

        const chartData = {
            labels: features.map((d) => d.properties.CONST), // Constituency names
            datasets: [{
                label: 'Regions',
                outline: features, // Outline feature
                data: features.map((d) => ({
                    feature: d,
                    value: Math.random() * 100  // Assign random values or real data
                })),
            }],
        };

        const chartOptions = {
            showOutline: true,
            showGraticule: false,
            scales: {
                projection: {
                    axis: 'xy',
                    projection: 'geoAzimuthalEqualArea',
                },
                color: {
                    type: 'color', // Register color scale for choropleth chart
                    axis: 'x', // Specify axis for the color scale
                    position: 'bottom', // Set position for color scale legend
                    quantize: 10, // The number of discrete color intervals
                },
            },
            plugins: {
                legend: {
                    display: false, // Disable the main legend display
                },
                geo: {
                    colorScale: {
                        display: true, // Display color scale legend
                        legend: {
                            position: 'bottom-right', // Position the color scale legend
                        },
                    },
                },
            },
        };

        setChartData({ data: chartData, options: chartOptions });
    }, [data]);

    if (error) return <div>Error loading data</div>;
    if (!data) return <div>Loading...</div>;

    return (
        <div className='w-full h-full'>
            {chartData ? <Chart type="choropleth" data={chartData.data} options={chartData.options} /> : 'Loading...'}
        </div>
    );
};