Мне необходимо менять цвет графика в Recharts если линия выходит за пределы диапазона

У меня есть входные данные. По условию я расчитываю диапазон, за которым график(линия) должен принять красный цвет. Помогите внедрить данную логику в recharts. Текущий код:

mport React from 'react';
import classes from './Settings.module.css'
import { LineChart, Line } from 'recharts';
import { XAxis } from 'recharts';
import { YAxis } from 'recharts';
import { Tooltip } from 'recharts';
import { Legend } from 'recharts';
import { CartesianGrid } from 'recharts';


const Settings = () => {


    const data = [
        {
            name: "Page A",
            uv: 4000,
            pv: 2400,
            amt: 2400
        },
        {
            name: "Page B",
            uv: 3000,
            pv: 1398,
            amt: 2210
        },
        {
            name: "Page C",
            uv: 2000,
            pv: 9800,
            amt: 2290
        },
        {
            name: "Page D",
            uv: 2780,
            pv: 3908,
            amt: 2000
        },
        {
            name: "Page E",
            uv: 1890,
            pv: 4800,
            amt: 2181
        },
        {
            name: "Page F",
            uv: 2390,
            pv: 3800,
            amt: 2500
        },
        {
            name: "Page G",
            uv: 3490,
            pv: 4300,
            amt: 2100
        }
    ];
    let stddevMaxMin = (data, p) => {
        let sum = 0;
        let arrayData = data.map(property => property[p]);
        let numberOfPages = arrayData.length
    
        for (let i = 0; i < numberOfPages; i++) {
            sum += arrayData[i];
        }
        let average = sum / numberOfPages
        let numerator = 0;
        for (let i = 0; i < numberOfPages; i++) {
            numerator += (arrayData[i] - average) ** 2;
        }
        let stddev = Math.round(Math.sqrt(numerator / numberOfPages))
        const Avgstddev = {
            maxAvgstddev: Math.round(average + stddev),
            minAvgstddev: Math.round(average - stddev)
        }
    
        return Avgstddev;
    }
    
    let amt = 'amt', uv = 'uv', pv = 'pv'
    let uvAvgstddev = stddevMaxMin(data, uv)
    let pvAvgstddev = stddevMaxMin(data, pv)
    let amtAvgstddev = stddevMaxMin(data, amt)
    
    console.log(uvAvgstddev, pvAvgstddev, amtAvgstddev)
    
    
    const renderLineChart = (
        <LineChart
    
            width={500}
            height={300}
            data={data}
            margin={{
                top: 5,
                right: 30,
                left: 20,
                bottom: 5
            }}
        >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line
                type="monotone"
                dataKey="pv"
                stroke="#ffff03"
                activeDot={{ r: 5 }}
            />
    
            <Line type="monotone" dataKey="uv"
                stroke="#82ca9d" />
        </LineChart>
    );