India map rendering issue on d3 + svelte

I'm an absolute beginner when it comes to d3 + svelte and I'm trying to render a map of Indian districts in d3 in svelte framework. The json I'm accessing is from here. I'm trying to render the districts in geoMercator projection. I'm guessing the problem lies with the projection function

$: projection = geoMercator().fitSize([width, height], geojson);
    $: pathGenerator = geoPath(projection);
  
    let districts = [];
    $: if (geojson) districts = geojson.features.map(feature => {
      return {
        ...feature,
        path: pathGenerator(feature)
      };
    });

the rendering is done here

{#each districts as district}
        <!-- svelte-ignore a11y-no-static-element-interactions -->
        <path
          d={district.path}
        />
{/each}

But all I see on the browser is black box, which on inspection is the svg container under which I'm rendering the {#each} block. I only want to render the map of India before I move on to joining data and interactivity.