Rechart area chart gradient colour change according to a variable

Reference Link
In Recharts react library, you can add gradient fills to area charts using the following method

<AreaChart width={730} height={250} data={data}
  margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
  <defs>
    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
    <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Area type="monotone" dataKey="uv" stroke="#8884d8" fillOpacity={1} fill="url(#colorUv)" />
  <Area type="monotone" dataKey="pv" stroke="#82ca9d" fillOpacity={1} fill="url(#colorPv)" />
</AreaChart>

In the example, they used two gradient elements with hardcoded "stopColor" property. When I give a variable colour in the following way stopColor = {areaColour} it doesn't work Rechart area

const plots = [colour1, colour2]
//Rechart line
plots.map((areaColour, index) => <Area type="monotone" dataKey={data[index]} fill="url(#color)" />

Defs

<defs>
    <linearGradient id="color" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor={areaColour} stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
</defs>

Is there a way to use a variable inside <defs> so I can use it to generate a dynamic gradient?