What's wrong with my solution? I can't generate more colors.

[Davessonn]

Hello!
First of all thank you for this cool plugin. I would like to ask for help with it. I have a "dashboard.jsx" file that calls VendorPie (it's just a pie chart). I installed the library, but it simply does not want to add more colors to the circular articles. It depends on how I set it up, but it's usually solid red. I've tried everything, can anyone help me?

`import React, { useEffect, useState } from 'react';
import { Pie } from 'react-chartjs-2';
import autocolors from 'chartjs-plugin-autocolors';
import Chart from "chart.js/auto";

Chart.register(autocolors)
const VendorPie = () => {

const [data, setData] = useState([]);
const [vendors, setVendors] = useState([]);

useEffect(() => {
    fetch('http://localhost:1234/contracts/countVendorContract')
      .then((response) => response.json())
      .then((apiData) => {
        setData(apiData);
      })
      .catch((error) => {
        console.error('Hiba történt:', error);
      });

      fetch('http://localhost:1234/vendors/allVendors')
      .then((response) => response.json())
      .then((vendorData) => {
        setVendors(vendorData);
      })
      .catch((error) => {
        console.error('Hiba történt a vendor nevek lekérdezésekor:', error);
      });
  }, []);

  const labels = data.map((item) => {
    const vendor = vendors.find((v) => v.id === item.contracted_vendor_id);
    return vendor ? vendor.name : item.contracted_vendor_id.toString();
  });

  const datas = data.map((item) => item.darab);

  const chartData = {
    labels: labels,
    datasets: [{
      data: datas,
    }]
  };

const chartOptions = {
    cutout: 70,
      plugins: {
        autocolors: {
          enabled: true, // Beállítjuk a borderColors-t autocolors-ra.
          mode: 'data',
        },
      },
  };

return (
    <Pie data={chartData} options={chartOptions} id="pie-chart" />
);

};

export default VendorPie;

`