Im having an hard time to setup the outlabels plugin on chart js for React.

As a note, every time I try to import outlabels plugin I get a merge error on the console , and then I cant register it successfully to chart js.. Not sure if i need to import this or if it works straight away by adding an extra property to options or data objects. This is not clear on documention..

The following code is what I have so far based on some google digging 😕

import React from 'react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import ChartDataLabels from "chartjs-plugin-datalabels";
// import "chartjs-plugin-piechart-outlabels";
import { Pie } from 'react-chartjs-2';
import styles from "./PieChart.module.scss";

ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);

const COLORS = [
  "#2ecc71",
  "#3498db",
  "#95a5a6",
  "#9b59b6",
  "#f1c40f",
  "#e74c3c",
  "#34495e"
];

const options = {
  responsive: true,
  plugins: {
    legend: {
      display: false
    },
    title: {
      display: false
    },
    datalabels: {
      display: false
    },
    outlabels: {
      display: true
    }
  }
};

const data = {
  plugins: {
    outlabels: {
      backgroundColor: null,
      color: COLORS,
      stretch: 30,
      font: {
        resizable: true,
        minSize: 15,
        maxSize: 20,
      },
      zoomOutPercentage: 100,
      textAlign: 'start',
    }
  },
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',

      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
      ],
      borderWidth: 1
    },
  ],
};

function PieChart() {
  return (
      <div className={styles.pieChartJsContainer}>
      <Pie data={data} options={options} /> {/* type={"outlabeledPie"}*/}
      </div>)
}


export default PieChart;

I want to achieve something like this: https://i.stack.imgur.com/LWKCy.png

I appreciate if someone could help 🙏 thanks!