d3.js Property 'name' does not exist on type 'Node'

Question

I'm implementing a bubble chart on ReactJS with typescript using d3.js, I get the data, structure as according to what I need and and then pass it as nodes but I get an error that says name does not exist on type node.

I'm using : "d3": "3.5.17", and "@types/d3": "3.5.46"

error

Property 'name' does not exist on type 'Node'.  TS2339

        61 | 
        62 |                 var vis = svg.selectAll("circle").data(nodes, function(d, i) {
      > 63 |                   return d.name + i;
           |                            ^
        64 |                 });
        65 | 
        66 |                 vis

that's how my data is structured

 let _data = Object.keys(data).map((key) => ({
                name: data[key].name,
                className: data[key].name,
                size: data[key].count,
                img: Rising,
            }))

and that's the function to generate the d3 chart

(function() {
                let json = _data
                let svg = d3
                  .select(".bubble_chart")
                  .append("svg")
                  /*
                  .attr("width", diameter)
                  .attr("height", diameter);
              */
                  .attr("preserveAspectRatio", "xMinYMin meet")
                  .attr("viewBox", "0 0 600 400")
                  //class to make it responsive
                  .classed("svg-content-responsive", true);
              
                let bubble = d3.layout
                  .pack()
                  .size([600, 400])
                  .value(function(d: any) {
                    return d.size;
                  })
                  .padding(2);
              
                // generate data with calculated layout values
                var nodes = bubble.nodes(json).filter(function(d) {
                  return !d.children;
                }); // filter out the outer bubble
              
                var vis = svg.selectAll("circle").data(nodes, function(d, i) {
                  return d.name + i;
                });
              
                vis
                  .enter()
                  .append("circle")
                  .attr("transform", function(d: any) {
                    return "translate(" + d.x + "," + d.y + ")";
                  })
                  .attr("class", function(d: any) {
                    return d.className;
                  })
                  .attr("r", 0)
                  .transition()
                  .duration(1000)
                  .attr("r", function(d: any) {
                    return d.r;
                  });
              
                vis
                  .enter()
                  .append("svg:image").style('opacity', 0)
                  .attr("transform", (d: any) => "translate(" + d.x + "," + d.y + ")")
                  .attr('x', (d: any) => -(d.r/1.5)/2)
                  .attr('y', (d: any) => -(d.r/1.5)/2)
                  .attr("xlink:href", function(d: any) {
                    return d.img;
                  })
                  .attr("width", (d: any) => d.r / 1.5).transition().duration(1000).style('opacity', 1);
            })();