Tryin responsive with chartjs

I’m using chartjs on my React project and I’m trying to make it responsive (I’m also working with material UI) I was wondering if someone can help me.

Here is part of my code. This is how I create my chart on my component

const createChart = (containerId, data, chartType) => {
    const ctx = document.getElementById(containerId).getContext("2d");
    new Chart(ctx, {
      type: chartType,
      data: {
        labels: data.labels,
        datasets: [
          {
            label: chartType === "radar" ? "Ajuste Cultural" : "KPIS",
            data: data.values,
            backgroundColor: data.colors,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
      },
    });
  };

and this is how I apply it to the MUI BOX

<Box
        // class="chart-container"
        // style={{ position: "relative" }}
          border={"5px solid blue"}
          flex={1}
          marginLeft={{ sm: "10px", xs: "0px" }}
        >
          <canvas id="culturalFitChart" width="200" height="100"></canvas>
        </Box>
        <Box border={"5px solid blue"} flex={1}>
          <canvas id="kpisChart" width="200" height="100"></canvas>
        </Box>

 
thank you