I am trying to set a variable to the selected data point inside of an ApexChart Heatmap. However calling setState crashes with an error of “TypeError: Cannot read properties of null (reading ‘getBoundingClientRect’)” even though the data is definitely not null. Funnily enough, adding a setTimout() and calling the set state from there works but it is too slow to be useful.

const [selectedDay, setSelectedDay] = useState(new Date().toISOString().split("T")[0])

const chartOptions = {
    chart: {
      type: "heatmap",
      toolbar: {
        show: false,
      },
      animations: {
        enabled: false,
      },
      redrawOnWindowResize: false,
      selection: {
        enabled: false,
      },
      // !!!  Error Here
      events: {
        dataPointSelection(event, chartContext, opts) {
          const day = opts.w.config.series[opts.seriesIndex].data[opts.dataPointIndex].x
          if (day !== null){
            setSelectedDay(day)
          }
          console.log(day)
      }
      },
    },
    grid: {
      show: false,
    },
    legend: {
      show: true,
    },
    tooltip: {
      enabled: true,
    },
    states: {
      normal: {
        filter: {
          type: "none",
          value: 0,
        },
      },
      hover: {
        filter: {
          type: "none",
          value: 0.15,
        },
      },
      active: {
        allowMultipleDataPointsSelection: false,
        filter: {
          type: "darken",
          value: 0.10,
        },
      },
    },

    plotOptions: {
      heatmap: {
        radius: 5,
      },
    },
    dataLabels: {
      enabled: false,
    },

    colors: ["#008FFB"],
    stroke: {
      colors: ["#D3D3D3"],
      width: 2,
    },
    title: {
      text: "User Contributions",
    },

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