reactjs chartjs change data when user clicked

I want to ask about changing data on a bar chart when the user clicks a button or tree menu.

So I have a useState to store provinsi, kota, kelurahan and kecamatan =

  const [dataProvinsi, setDataProvinsi] = useState([]);
  const [dataKota, setDataKota] = useState([]);
  const [dataKecamatan, setDataKecamatan] = useState([]);
  const [dataKelurahan, setDataKelurahan] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingKota, setIsLoadingKota] = useState(false);
  const [isLoadingKecamatan, setIsLoadingKecamatan] = useState(false);
  const provinsiRef = useRef([]);
  const kotaRef = useRef([]);
  const kecamatanRef = useRef([]);

Then, here is the fetch code =

  const getDataAllProvinsi = () => {
    setIsLoading(true);
    getBuildingOLDallProvinsi()
      .then((resolve) => {
        setDataProvinsi(resolve);
        console.log();
      })
      .catch((reject) => {
        console.log(reject);
      })
      .finally(setIsLoading(false));
  };

  const handleProvinsi = async (index) => {
    try {
      const provinsi = provinsiRef.current[index].dataset.prov;
      setIsLoading(true);
      const result = await getBuildingOLDallKota(provinsi);
      setDataKota(result);
      console.log(result);
    } catch (error) {
      console.log("salah");
    } finally {
      setIsLoading(false);
    }
  };

  const handleKota = async (provinsi, index) => {
    try {
      const kota = kotaRef.current[index].dataset.city;
      setIsLoadingKota(true);
      const result = await getBuildingOLDallKecamatan(provinsi, kota);
      setDataKecamatan(result);
      console.log(result);
    } catch (error) {
      console.log("salah");
    } finally {
      setIsLoadingKota(false);
    }
  };

  const handleKecamatan = async (provinsi, kota, index) => {
    try {
      const kecamatan = kecamatanRef.current[index].dataset.camat;
      setIsLoadingKecamatan(true);
      const result = await getBuildingOLDallKelurahan(
        provinsi,
        kota,
        kecamatan
      );
      setDataKelurahan(result);
      console.log(result);
    } catch (error) {
      console.log("salah");
      console.log(error);
    } finally {
      setIsLoadingKecamatan(false);
    }
  };

  useEffect(() => {
    getDataAllProvinsi();
  }, [dataKota, dataKecamatan, dataKelurahan]);

for a chart like this =

  const colorCode = "#0066FF";
  const colorFont = "#8E9093";
  const state = {
    dataProv: {
      labels: dataProvinsi.map((o) => o.provinsi),
      datasets: [
        {
          fill: true,
          label: null,
          backgroundColor: colorCode,
          borderColor: colorCode,
          borderWidth: 2,
          borderRadius: 12,
          data: dataProvinsi.map((o) => o.total_building),
        },
      ],
    },
    datakota: {
      labels: dataKota.map((o) => o.kota),
      datasets: [
        {
          fill: true,
          label: null,
          backgroundColor: colorCode,
          borderColor: colorCode,
          borderWidth: 2,
          borderRadius: 12,
          data: dataKota.map((o) => o.total_building),
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: false,
          labels: {
            font: {
              color: colorFont,
            },
          },
        },
      },
      scales: {
        x: {
          grid: {
            display: false,
          },
          beginAtZero: false,
          ticks: {
            color: colorFont,
          },
        },
        y: {
          grid: {
            display: false,
          },
          beginAtZero: true,
          ticks: {
            color: colorFont,
          },
        },
      },
    },
  };

  const plugins = [
    {
      beforeDraw: function (chart) {
        if (chart.chartArea) {
          let ctx = chart.ctx;
          let chartArea = chart.chartArea;
          let barArray = chart.getDatasetMeta(0).data;

          ctx.fillStyle = "#B2D1FF85";

          for (let i = 0; i < barArray.length; i++) {
            const { x, width } = barArray[i];

            ctx.fillRect(
              x - width / 2,
              chartArea.top,
              width,
              chartArea.bottom - chartArea.top
            );
          }
        }
      },
    },
  ];

for the code to change the data every time the user clicks like this =

  const changeData2 = () => {
    const data = [state.datakota];
    setDataKota(data);
    console.log(data);
  };

and for the Bar itself like this =

<Bar
          type={"bar"}
          height={120}
          data={state.dataProv}
          options={state.options}
          plugins={plugins}
        />

When I execute it in a browser, which initially displays provincial data then I click on the provincial data, nothing happens on the chart. for more details in the video I put the link =
https://va.media.tumblr.com/tumblr_rqe2h1npcr1zb5h2t.mp4

So my question is, is there something wrong with my code so that when the user clicks on the tree menu, nothing happens on the chart? Thank You