Plotly react graphs are not showing in react plotly

plotly.js
1

I am trying to use Ployly in React. When I make three pretty standard pie charts, they show up as white squares. I also get a message from npm that Failed to parse source map from '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map' file: Error: ENOENT: no such file or directory, open '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map'

This is a screenshow showing the error:

screenshot-2025-01-23-22-53-20
screenshot-2025-01-23-22-53-201795×636 9.74 KB

Can I get some advice on how to solve this?

Here is my react plotly code:

import React from 'react';
import Plot from 'react-plotly.js'

function Portfolio() {
    const growthPortfolio = [{
            values: [19, 26, 55],
            labels: ['Residential', 'Non-Residential', 'Utility'],
            type: 'pie',
            hole: 0.4,
    }]

    const valuePortfolio = [{
            values: [30, 40, 30],
            labels: ['Residential', 'Non-Residential', 'Utility'],
            type: 'pie',
            hole: 0.4,
    }]


    const totalPortfolio = [{
            values: [45, 35, 20],
            labels: ['Residential', 'Non-Residential', 'Utility'],
            type: 'pie',
            hole: 0.4,
    }]


    return (
        <>
            <Plot data={growthPortfolio} />
            <Plot data={valuePortfolio} />
            <Plot data={totalPortfolio}/>
        </>
    );
}

export default Portfolio;