React ApexCharts Heatmap Can’t display months on x-axis

I am trying to replicate this post using the linked code in the first answer. But I cannot display months in my chart. My goal is to create a a heatmap very similar to Github’s contributions chart. This is the result Here is my code:

import { useParams } from "react-router-dom/cjs/react-router-dom.min";
import React, { useState, useEffect, useRef } from "react";
import ReactApexChart from "react-apexcharts";

export default function TeamMember() {
  const { TeamId, UserId } = useParams();

  const chartOptions = {
    chart: {
      height: 350,
      type: "heatmap",
    },
    
    colors: ["#008FFB"],
    title: {
      text: "User Contributions",
    },

    xaxis: {
      type: "datetime",
      labels: {
        format: "MMM",
        showDuplicates: false,
      },
    },
  };

  const chartSeries = [
    {
      name: "Sun",
      data: [
        { x: "04-26-2020", y: 0 },
        { x: "05-03-2020", y: 40 },
        { x: "05-10-2020", y: 40 },
        { x: "05-17-2020", y: 40 },
        { x: "05-24-2020", y: 40 },
      ],
    },
    {
      name: "Mon",
      data: [
        { x: "04-27-2020", y: 10 },
        { x: "05-04-2020", y: 40 },
        { x: "05-11-2020", y: 40 },
        { x: "05-18-2020", y: 40 },
        { x: "05-25-2020", y: 40 },
      ],
    },
    {
      name: "Tue",
      data: [
        { x: "04-28-2020", y: 20 },
        { x: "05-05-2020", y: 40 },
        { x: "05-12-2020", y: 40 },
        { x: "05-19-2020", y: 40 },
        { x: "05-26-2020", y: 40 },
      ],
    },
    {
      name: "Wed",
      data: [
        { x: "04-29-2020", y: 40 },
        { x: "05-06-2020", y: 40 },
        { x: "05-13-2020", y: 40 },
        { x: "05-20-2020", y: 40 },
        { x: "05-27-2020", y: 40 },
      ],
    },
    {
      name: "Thu",
      data: [
        { x: "04-30-2020", y: 50 },
        { x: "05-07-2020", y: 40 },
        { x: "05-14-2020", y: 40 },
        { x: "05-21-2020", y: 40 },
        { x: "05-28-2020", y: 40 },
      ],
    },
    {
      name: "Fri",
      data: [
        { x: "05-01-2020", y: 60 },
        { x: "05-08-2020", y: 40 },
        { x: "05-15-2020", y: 40 },
        { x: "05-22-2020", y: 40 },
        { x: "05-29-2020", y: 40 },
      ],
    },
    {
      name: "Sat",
      data: [
        { x: "05-02-2020", y: 70 },
        { x: "05-09-2020", y: 40 },
        { x: "05-16-2020", y: 40 },
        { x: "05-23-2020", y: 40 },
        { x: "05-30-2020", y: 40 },
      ],
    },
  ];

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={chartOptions}
          series={chartSeries}
          type="heatmap"
          height={350}
        />
      </div>
      <div id="html-dist"></div>
    </div>
  );
}

Any help on this issue or anything else related to creating this chart would be really helpful.