I am trying to plot a graph using D3 and react. The sample data I been using is of this format

[{
    "date": "01-01-2022",
    "site": "Site 1",
    "type": "circle"
},
{
    "date": "01-01-2022",
    "site": "Site 4",
    "type": "square"
}
...
]

The xScale and yScale are declared as

 const xValue = (d) => d.date;
 const xScale = scaleTime()
    .domain(extent(data, xValue))
    .range([0, innerWidth]);

const yValue = (d) => d.site;
const yScale = scaleThreshold()
.domain(data.map((d) => yValue(d)))
.range([
  "Site 1",
  "Site 2",
  "Site 3",
  "Site 4",
  "Site 5",
  "Site 6",
  "Site 7",
  "Site 8",
  "Site 9"
]);

And the x axis component AxisBottom is with tickFormat is defined as const xAxisTickFormat = timeFormat("%B");

export const AxisBottom = ({
  xScale,
  innerHeight,
  tickFormat,
  tickOffset = 3
}) => {
  return xScale.ticks().map((date) => (
    <g
      className="tick"
      key={date}
      transform={`translate(${xScale(date)}, ${0})`}
    >
        <text
            y={innerHeight + tickOffset}
            dy=".7em"
            style={{ textAnchor: "middle" }}
       >
       {tickFormat(date)}
       </text>
    </g>
  ));
};

What I'm trying to achieve is for all data points for a month, say January display January once as text in the x-axis. The work so far has been compiled in codesandbox. Any suggestions would be really helpful.