D3 line chart change the color dyanmicallly based on mock data in react js

Question

I am new to d3 I wanted to change the color of the graph, when caseDifference is Same I need to show it as grey color. when caseDifference is Increase I need to show it as green color. when caseDifference is Decrease I need to show it as Red color. I debugged the code and found that in css they are changing the color so I changed .trend__line to green color. But I need to change dyanmically on the basis of caseDifference. Providing code snippet and sandbox below.

https://codesandbox.io/s/n6ssk7?file=/src/components/Trend.js

<defs>
        <clipPath id="selected-region">
          <rect x={0} y={0} width={selectedWidth} height={height} />
        </clipPath>
      </defs>
      <g
        ref={yAxisRef}
        className="trend__y-axis trend__axis"
        transform={`translate(${yAxisWidth}, 0)`}
      />



.trend__area {
  fill: #f7d5d0;
}

.trend__line {
  fill: none;
  stroke: green;
  stroke-width: 2;
}





[
  { "Date": "2020-01-21", "Confirmed": 1, "caseDifference": "same" },
  { "Date": "2020-01-22", "Confirmed": 10, "caseDifference": "Increase" },
  { "Date": "2020-01-23", "Confirmed": 5, "caseDifference": "Decrease" },
  { "Date": "2020-01-24", "Confirmed": 2, "caseDifference": "Decrease" },
  { "Date": "2020-01-25", "Confirmed": 3, "caseDifference": "Increase" },
  { "Date": "2020-01-26", "Confirmed": 5, "caseDifference": "Increase" },
  { "Date": "2020-01-27", "Confirmed": 5, "caseDifference": "same" },
  { "Date": "2020-01-28", "Confirmed": 5, "caseDifference": "same" },
  { "Date": "2020-01-29", "Confirmed": 5, "caseDifference": "same" }]