Using react-chartjs-2 in Gatsby gives me a “cannot read properties of undefined” error in its components

I’m trying to use react-chartjs-2 in a Gatsby project. I followed this website to write down a first test to see if it works. My code is:

import React from "react"
import { Chart, Arclement, Tooltip, Legend } from 'chart.js'
import { Pie } from 'react-chartjs-2'

const data = {
    labels: ['Taxation', 'Materials', 'Profit', 'Expenses', 'Wages'],
    datasets: [
      {
        label: 'Tax bill',
        data: [25, 20, 8, 12, 34],
      },
    ],
};

const PieChart = () => {
    return (
      <div style={{ width: '750px' }}>
        <Pie data={data} />
      </div>
    );
};

const Artists = (props) => {
    let artistChart = getArtistChart(orderArtists(props.stats));
    return (
        <div id="statsCard">
            <PieChart />
        </div>
    )
}

And I’m getting the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at TypedRegistry.isForType (chart.esm.js:4756:1)
    at Registry._getRegistryForType (chart.esm.js:4899:1)
    at eval (chart.esm.js:4879:1)
    at Array.forEach (<anonymous>)
    at Registry._each (chart.esm.js:4878:1)
    at Registry.add (chart.esm.js:4836:1)
    at Chart.value [as register] (chart.esm.js:6169:1)
    at eval (webpack-internal:///./src/pages/elements/artists.jsx:17:45)
    at ./src/pages/elements/artists.jsx (component---src-pages-index-js.js:62:1)
    at options.factory (commons.js:3711:31)

Is it caused by a wrong way to use chartjs inside Gatsby or can it be fixed the way it is?