I want to show data fetched from an API in line chart using rechart.But if there is no variation in the datapoint ('pv' in our case) then no graph line is visible when using linear gradient, but I want a single line in case of no variation in the data point. Assume data is fetched from an API and can be dynamic

import { LineChart, Line, Tooltip, XAxis } from "recharts";
import ReactDOM from "react-dom";
import React from "react";

const data = [
  { name: "Page A", uv: 4000, pv: 1000, amt: 2400 },
  { name: "Page B", uv: 3000, pv: 1000, amt: 2210 },
  { name: "Page C", uv: 2000, pv: 1000, amt: 2290 },
  { name: "Page D", uv: 2780, pv: 1000, amt: 2000 },
  { name: "Page E", uv: 1890, pv: 1000, amt: 2181 },
  { name: "Page F", uv: 2390, pv: 1000, amt: 2500 },
  { name: "Page G", uv: 3490, pv: 1000, amt: 2100 }
];

const App = () => {
  return (
    <LineChart width={500} height={500} data={data}>
      <defs>
        <linearGradient id="colorUv" x1="0%" y1="0" x2="100%" y2="0">
          <stop offset="0%" stopColor="blue" />
          <stop offset="50%" stopColor="red" />
          <stop offset="100%" stopColor="red" />
        </linearGradient>
      </defs>
      <Line
        type="monotone"
        dataKey="pv"
        stroke="url(#colorUv)"
        strokeWidth={3}
        dot={false}
        activeDot={false}
      />
      <XAxis />
      <Tooltip />
    </LineChart>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));