d3.js geo projection renders a black box

Question

I am trying to make a US map using d3.js.

I use the following code to draw my map:

const EDUCATION =
  'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json';
const COUNTY =
  'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json';

const W = 1000
const H = 500
const M = { top: 30, right: 30, bottom: 30, left: 30 }
const P = { top: 30, right: 30, bottom: 30, left: 30 }

function draw(W, H, M, P, COUNTY, EDUCATION) {
  
  const geoJson = topojson.feature(COUNTY, COUNTY.objects.counties)
  
  const projection = d3.geoMercator().fitSize([W, H], geoJson)
 
  const path = d3.geoPath(projection)
  
  const svg = d3
  .select("#container")
  .append("svg")
  .attr("class", "svg-area")
  .attr("width", W)
  .attr("height", H)
  
  const map = svg
  .append('g')
  .selectAll("path")
  .data(geoJson.features)
  .enter()
  .append("path")
  .attr('class', 'counties')
  .attr('d', path)
}

Promise
.all([d3.json(COUNTY), d3.json(EDUCATION)])
.then(data => draw(W, H, M, P, data[0], data[1]))
.catch(err => console.log(err));

The map is too big and therefore, I decided to scale it down using the projection.fitSize() method. I followed this article to learn about it.

Without the const projection = d3.geoMercator().fitSize([W, H], geoJson) projection the map is successfully drawn. But with it, something weird happens: I see a black box and nothing else, the entire shape of the map just becomes a black box.

You can see the live example here:

https://codepen.io/mush-a/pen/RwQaYJx?editors=0010

The topojson data is given here