Years in Xaxis of Recharts

Question

x_values = [
    "2017-04-30T18:30:00.000Z",
    "2017-05-31T18:30:00.000Z",
    "2018-01-31T18:30:00.000Z",
    "2018-02-28T18:30:00.000Z",
    "2019-09-30T18:30:00.000Z",
    "2019-10-31T18:30:00.000Z",
    "2020-01-31T18:30:00.000Z",
    "2020-02-29T18:30:00.000Z",
    "2021-01-31T18:30:00.000Z",
    "2021-02-28T18:30:00.000Z",
    "2022-01-01T00:00:00.000Z",
    "2022-01-31T18:30:00.000Z",
    "2023-01-01T00:00:00.000Z",
    "2023-02-01T00:00:00.000Z",
]
y_values = [
    4.04,
    4.15,
    3.39,
    4.11,
    4.66,
    5.04,
    4.76,
    4.78,
    5.04,
    6.06,
    6.23,
    5.86,
    8.1,
    7.23,
]

I want my graph to have just Year values but my plot should be perfect according to the date in x_values. Can anyone help me show just the Years in the x-axis while plotting a line map as it is from the values provided?

I tried making ticks like sampleTicks=[2023,2022,2021,2020,2019,2018,2017] and providing it in the ticks attribute like this: <XAxis ticks={sampleTicks}/> but this leads the line graph to get all values just above the respective years like this the wrong output I want the data to be spread like this but with the x-axis to show only years. spreaded-line chart