react-chart-js2 Showing Negative Axis when dataset contains all 0's

I am using react-chart-js2@3.3.0 with chart.js@3.6.2

When my dataset contains all 0s, the y-axis scales from -1 to 1 as such:

See Image

How do I make it start at 0 regardless? There seems to be a workaround for this: here and here but these solutions did not work for me. Basically, the workaround is to include a max in the ticks but it appears to just ignore it. I also tried upgrading to react-chart-js2@4 but for some reason it breaks so I reverted it back to 3.3.0.

Here is my options object:

const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false,
      },
    },
    layout: {
      padding: 0,
    },
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false,
            drawBorder: false,
          },
          ticks: {
            padding: 18,
            fontColor: theme.palette.text.secondary,
          },
        },
      ],
      yAxes: [
        {
          gridLines: {
            borderDash: [6],
            borderDashOffset: [0],
            display: false,
            color: theme.palette.divider,
            drawBorder: false,
            zeroLineBorderDash: [6],
            zeroLineBorderDashOffset: [0],
            zeroLineColor: theme.palette.divider,
          },
          ticks: {
            padding: 12,
            fontColor: theme.palette.text.secondary,
            beginAtZero: true,
            min: 0,
            max: 100,
          },
        },
      ],
    },
    tooltips: {
      enabled: true,
      mode: "nearest",
      intersect: false,
      caretSize: 6,
      displayColors: false,
      yPadding: 8,
      xPadding: 16,
      borderWidth: 4,
      borderColor: theme.palette.common.black,
      backgroundColor: theme.palette.common.black,
      titleFontColor: theme.palette.common.white,
      bodyFontColor: theme.palette.common.white,
      footerFontColor: theme.palette.common.white,
      callbacks: {
        title: () => {},
        label: (tooltipItem) => {
          return `New Users: ${tooltipItem.yLabel}`;
        },
      },
    },
  };