Recharts data not updating on the chart when using the slider - reactjs

Question

I am trying to display a dot that moves on the line when I use the slider (SliderWidget.js) but nothing is happening. I did the console.log() to see if it works and it does but on the chart (I am using Recharts library) nothing happens.
import SliderWidget from "../SliderWidget";
import { LineChart, Line, XAxis, YAxis, CartesianGrid } from "recharts";
import { useState } from "react";
const LongitudinalCoG = () => {
const [chartValue, setChartValue] = useState([
{
data: [
{ x: 1000, y: 2000 },
{ x: 3000, y: 3500 },
{ x: 4000, y: 4500 },
{ x: 4100, y: 4200 },
],
},
{
//this is the little dot on the chart
data: [{ x: 2000, y: 2500 }],
},
]);
console.log(chartValue);
function sliderData(newValue) {
chartValue[1].data[0].x = newValue;
setChartValue(chartValue);
console.log(chartValue);
}
return (
<div>
<LineChart
width={500}
height={300}
data={chartValue}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="x" />
<YAxis dataKey="y" />
<Line
dataKey="y"
data={chartValue[0].data}
stroke="white"
dot={{
r: 1,
}}
/>
<Line
dataKey="y"
data={chartValue[1].data}
stroke="blue"
dot={{
r: 3,
}}
/>
</LineChart>
<SliderWidget
minValue={chartValue[1].data[0].x}
maxValue={chartValue[1].data[0].y}
sliderTitle={"Override (mm)"}
onValueChanged={sliderData}
/>
</div>
);
};
export default LongitudinalCoG;
this is the SliderWidget component
import { useState } from "react";
import { Slider, InputNumber } from "antd";
import Icon from "#mdi/react";
import { mdiPlus, mdiMinus } from "#mdi/js";
import "../styles/Expanded.css";
const SliderWidget = (props) => {
const [inputValue, setInputValue] = useState(0);
const onChange = (newValue) => {
setInputValue(newValue);
props.onValueChanged(newValue);
};
function increment() {
if (inputValue + 1 < props.maxValue) {
setInputValue(inputValue + 1);
}
}
function decrement() {
if (inputValue - 1 > props.minValue) {
setInputValue(inputValue - 1);
}
}
return (
<div>
<div className="slider-title">
{props.sliderTitle}
<InputNumber
className="input-number-helicopter"
style={{ width: "40px", marginBottom: "10px", marginTop: "10px" }}
value={inputValue}
onChange={onChange}
controls={false}
/>
<div className="increment-decrement-container">
<button className="increment-button" onClick={increment}>
<Icon path={mdiPlus} size={"1rem"} color={"#FFFFFF"} />
</button>
<button className="decrement-button" onClick={decrement}>
<Icon path={mdiMinus} size={"1rem"} color={"#FFFFFF"} />
</button>
</div>
</div>
<div>
<Slider
className="slider-helicopter"
minValue={1}
maxValue={4000}
onChange={onChange}
value={inputValue}
/>
</div>
</div>
);
};
export default SliderWidget;
This is the chart. I want to make the litle dot move on the white lines when I use the slider or the increment/decrement buttons
As I said, I run the console.log() and it is working but it is not showing on the chart!