D3 Add filling tto choropleth map based on values of csv

I am wondering how i can add colors to my colorpleth map, based on values of a csv file. I simply don’t get the point where i match those values to the different states of the us.

This is the json i used to create the map:
Json

My csv/Excel File looks like this:
States Column
With another Column named Shootings/Mio and values, which should represent the values for the individual colouring

Here you find my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
</head>
<body>
    <div class="home"></div>
    <script src="./test_script.js"></script>
</body>
</html>

And here you find my JS

let fetchData = async () => {
  dataset = d3.csv("Shootings.csv");
  return dataset;
};

const width = 900;
const height = 600;

const svg = d3
  .select(".home")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const projection = d3
  .geoAlbersUsa()
  .translate([width / 2, height / 2]) // translate to center of screen
  .scale([1000]); // scale things down so see entire US

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

fetchData().then((dataset) => {
  
  var Shootings = dataset.map(function(d){
    return d['ShootingsMio']
  })

  var states = dataset.map(function(d){
    return d['state_y']})

  var col_range_low = "#fff";
  var col_range_high = "#002837";

  var range_low = Math.min(...Shootings);
  var range_high= Math.max(...Shootings);

  console.log(Shootings)
  console.log(range_low)
  console.log(range_high)

  var color = d3.scaleLinear()
      .range([col_range_low, col_range_high])
      .domain([range_low,range_high])
      .interpolate(d3.interpolateLab);

  const tooltip = d3
    .select(".home")
    .append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

  const g = svg.append("g");

  d3.json(
    "https://gist.githubusercontent.com/Bradleykingz/3aa5206b6819a3c38b5d73cb814ed470/raw/a476b9098ba0244718b496697c5b350460d32f99/us-states.json"
  ).then((world) => {
    g.selectAll("path")
      .data(world.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("class", "state")
      //.style("fill" How add filling based on the ShootingsMio column?
      })
      });

It looks like this momentanely
Server

If anyone could help me i would really appreciate that!