White screen in electron when using react-chartjs-2

Question

I have this typical chart implementation of react-chartjs-2. Why is this not working in electron generated using Vite and with react with TypeScript (.tsx) as the front-end? The problem: I can't see the chart, my other components/UI elements disappears when this component is used with other components, the terminal and the app doesn't give me errors; I just see a blank screen (image attached below).

import { Doughnut } from "react-chartjs-2";

const Analytics = () => {
    const data = {
        labels: ["Rent", "Groceries", "Utilities", "Others"],
        datasets: [
            {
                data: [8000, 15000, 5000, 12000],
                backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4CAF50"],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#4CAF50",
                ],
            },
        ],
    };

    return (
        <div>
            {/* Add the Doughnut chart */}
            <Doughnut data={data} />
        </div>
    );
};

export default Analytics;

This is what my component looks like before using the component. NOTE: I want to display the chart below the "Hello, World!" text: This is what I see after using the component: