How to get Recharts to dynamically change color from a variable in data

Question

I'm trying to add color to parts of a Rechart plot (based on a value in the data). The chart that I'm trying to recreate is shown below. Here is my code currently which just plots the chart with one color https://codesandbox.io/s/stupefied-shamir-e1u0vt?file=/src/App.js.

I tried using linearGradient in the way shown below (commented) but that seems to gives 2 colors (red if above a certain y value and green if below).

The data format:

>>> data = [{X: 100, Y: 200, Speed: 0},{X: 200, Y: 200, Speed: 1},{X: 300, Y: 400, Speed: 3}]

Current Recharts Code:

<LineChart
  width={600}
  height={300}
  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
  data={data}
>
  {/* <defs>
    <linearGradient id="colorSpeed" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stopColor="red" />
      <stop offset="100%" stopColor="green" />
    </linearGradient>
  </defs> */}
  <Line dot={false} type="monotype" dataKey="Y" 
  // stroke="url(#colorSpeed)" 
  />

  <XAxis type="number" dataKey="X" domain={["auto", "auto"]} />
  <YAxis domain={("auto", "auto")} />
  <Tooltip />
  <Legend />
</LineChart>

What I'm trying to recreate: