Drawing a simple polygon with D3.js doesn't work

Can't find the issue why the polygon is not drawn with the following code in d3:

<script type="module">
            import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

            var width = 650,
                height = 225;

            // Creates a projection of the Netherlands
            var projection = d3
                .geoMercator()
                .center([5.5, 52.2]) // GPS coordinates of the center of the Netherlands
                .scale(7000) // Adjust the scale as needed
                .translate([width / 2, height / 2]);

            var path = d3.geoPath().projection(projection);

            // Creates the SVG that state paths and location points will be attached to
            var d3_map = d3
                .select(".svg")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

            // Creates a 'g' (group) element within the SVG which states paths will be attached to
            var states = d3_map.append("g").attr("class", "states");
            var locations = d3_map.append("g").attr("class", "locations");

            var mapFeatures = {
                type: "FeatureCollection",
                features: [
                    {
                        type: "Feature",
                        geometry: {
                            type: "Polygon",
                            coordinates: [[plot]],
                        },
                        properties: {
                            statcode: "PV20",
                            jrstatcode: "2024PV20",
                            statnaam: "Groningen",
                            rubriek: "provincie",
                            id: 1,
                            FID: "provincie_gegeneraliseerd.7ff1a1db-9761-46b4-b8c0-8962f9c49e5a",
                        },
                        id: "PV20",
                    },
                ],
            };
            console.log("Ontvangen coordinaten: ", mapFeatures.features[0].geometry.coordinates);

            // Binds the data to the SVG and create one path per GeoJSON feature
            states
                .selectAll("path")
                .data(mapFeatures.features)
                .enter()
                .append("path")
                .attr("d", path)
                .attr("fill", function (d) {
                    return d.properties.statnaam === "Groningen" ? "#1d92b5" : "grey";
                })
                .style("stroke", "black");
        </script>

So the plot is dynamically filled. For example with the following coordinates: [[4.46658332590609, 51.9189952744721], [4.4665832076367, 51.9189932420877], [4.46660765324146, 51.918992768389], [4.46661899727716, 51.9189924976887], [4.46663310465063, 51.9189921587427], [4.46665520951266, 51.9189917026561], [4.46665580183947, 51.9189982690841], [4.46665885751841, 51.9189981222296], [4.46666937101816,8844, 51.9191898770815], [4.46639899390348, 51.9191872684845], [4.46639666721731, 51.9191518345738], [4.46639599771547, 51.9191419417015], [4.46639402603949, 51.9191104656227], [4.46639314503411, 51.91909670593], [4.46639029235821, 51.9190514701581], [4.46638744152916, 51.9190061445128], [4.46656804474943, 51.9189961435434], [4.46658332590609, 51.9189952744721]]

<div class="svg"></div>

All I get is a blue square: Image of the map

I've tried different scaling and center() in the projection. Couldn't figure out what's wrong.