Nivo line chart with X as dates and Y as number

Question

I'm trying to implement a nivo line chart where the data from backend looks like this:

 const data = [
    {
      id: 'events',
      color: 'blue',
      data: [
        {
          x: '2021-03-01',
          y: 314,
        },
        {
          x: '2021-03-02',
          y: 201,
        },
        {
          x: '2021-04-01',
          y: 309,
        },

        ...

The data varies from the date range that users can choose. My question is if users choose a date range which is from January 2022 to October 2022, how do I group the Y data to show a calculation of all Y from a particular month. The X is easy handled by the nivo library but it's not the same case with Y. For example if I want to show monthly graph, and I have X values like 2022-01-20, 2022-01-21, I need to calculate the Ys values of each day of January and display it as a single point.

Here is my code for chart:

 <ResponsiveLineCanvas
    {...commonProperties}
    data={data}
    xScale={{
      type: "time",
      format: "%Y-%m-%d",
      precision: "month",
      useUTC: false,
    }}
    xFormat="time:%Y-%m-%d"
    yScale={{
      type: "linear",
    }}
    axisLeft={{
      legendOffset: 12,
    }}
    axisBottom={{
      format: "%b %d",
      tickValues: "every month",
      legend: "time scale",
    }}
    pointSize={16}
    pointBorderWidth={1}
    pointBorderColor={{
      from: "color",
      modifiers: [["darker", 0.3]],
    }}
    enableSlices={false}
  />