The following chartcomponent is rendering the charts great but the colors are changing on hitting next question or submit buttons, can you suggest any remedies:

import React from "react";
import { Pie, Bar, Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  LineElement,
  PointElement,
} from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
import TableComponent from "./TableComponent";

ChartJS.register(
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  ChartDataLabels,
  LineElement,
  PointElement
);

const calculateHeight = (type, data) => {
  const baseHeight = 300;
  const datasetCount = data.datasets ? data.datasets.length : 0;
  const labelCount = data.labels ? data.labels.length : 0;

  if (type === "pie") {
    return baseHeight;
  } else if (type === "line" || type === "bar") {
    return baseHeight + datasetCount * 20 + labelCount * 10;
  }
  return baseHeight;
};

const getRandomColor = () => `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},0.6)`;

const transformData = ({ headers, rows }, type) => {
  if (type === "table") return { headers, rows };

  const labels = headers.slice(1);
  const datasets = rows.map(row => ({
    label: row[headers[0]],
    data: headers.slice(1).map(header => parseFloat(row[header]) || 0),
    backgroundColor: getRandomColor(),
  }));

  return { labels, datasets };
};

const ChartComponent = ({ type, data, width = 400, height }) => {
  if (type === "table") {
    return <TableComponent data={data} />;
  }

  const transformedData = transformData(data, type);
  const calculatedHeight = height || calculateHeight(type, transformedData);

  const options = {
    responsive: false,
    maintainAspectRatio: false,
    plugins: {
      tooltip: {
        enabled: true,
        bodyFont: { size: 14 },
      },
      datalabels: {
        display: () => !data.hideLabels && type === "pie",
        color: "#000",
        font: { weight: "bold", size: 16 },
        formatter: (_, context) => context.chart.data.labels[context.dataIndex],
        align: "center",
        anchor: "center",
        offset: 0,
      },
      legend: {
        display: true,
        position: "right",
        labels: {
          font: { size: 14 },
        },
      },
      title: {
        display: true,
        text: data.title || `${type.charAt(0).toUpperCase() + type.slice(1)} Chart`,
        font: { size: 18, weight: "bold" },
      },
    },
  };

  if (type !== "pie") {
    options.scales = {
      y: {
        beginAtZero: true,
        ticks: { font: { size: 12 } },
        grid: { display: true },
        title: {
          display: true,
          text: data.yAxisLabel || "Y Axis",
          font: { size: 14, weight: "bold" },
        },
      },
      x: {
        ticks: { font: { size: 12 } },
        grid: { display: false },
        title: {
          display: true,
          text: data.xAxisLabel || "X Axis",
          font: { size: 14, weight: "bold" },
        },
      },
    };
  }

  const chartProps = { data: transformedData, options, width, height: calculatedHeight };

  switch (type) {
    case "pie":
      return <Pie {...chartProps} />;
    case "bar":
      return <Bar {...chartProps} />;
    case "line":
      return <Line {...chartProps} />;
    default:
      return <div>Unsupported chart type</div>;
  }
};

export { ChartComponent };