Uncaught Error: "barWithErrorBars" is not a registered controller (v3.9.1) about chartjs-chart-error-bars HOT 5 CLOSED

import { Chart as ChartJS, Title, Tooltip, LinearScale, CategoryScale, BarElement } from 'chart.js';
import {
    BarWithErrorBar,
    BarWithErrorBarsController,
    PointWithErrorBar,
} from 'chartjs-chart-error-bars';
import { Chart } from 'react-chartjs-2';

// these all registers i tries to add
ChartJS.register(
    PointWithErrorBar,
    BarWithErrorBarsController,
    BarWithErrorBar,
    LinearScale,
    CategoryScale,
    BarElement,
    LinearScale,
    CategoryScale,
    Title,
    Tooltip,
);

const options = {
    // annotations,
    scales: {
        x: {
            // type: 'time',
            // ticks: {
            //     source: 'auto',
            // },
        },
        y: {
            suggestedMin: 0,
        },
    },
};

const getChartDatasets = (data) => ({
    labels: data.map(({ x }) => x),
    datasets: [
        {
            data,
        },
    ],
});


export const BarChartWithErrors = () => {
    return <Chart
        type="barWithErrorBars"
        data={getChartDatasets([{ x: 'a', y: 3, yMin: 1, yMax: 4 }, { x: 'b', y: 2 }, { x: 'c', y: 1 }])}
        width={300}
        height={200}
        options={options}
    />
}