chartjs-chart-financial in next.js is not showing

I am working on a simple Chart dashboard app in Next.js, using Chart.js. I am trying to add a Candlestick chart component, for which I use the chartjs-chart-financial library. However I only get an empty graph, with just the number and axis

Here is my source code

'use client'

import { Chart, Bar } from "react-chartjs-2"
import "chartjs-chart-financial"

import "chartjs-adapter-date-fns";
import { enUS } from "date-fns/locale"

export default function CandlestickChart() {

    const chartData = {
        datasets: [
            {
                label: "Candlestick Chart",
                data: [{ t: new Date("2023-08-01"), o: 100, h: 120, l: 90, c: 110 }],
            }
        ]
    };

    return (
        <Chart type="candlestick" data={chartData} options={{
                scales: {
                    x: {
                        type: "time",
                        adapters: {
                            date: {
                                locale: enUS,
                            }
                        }
                    }
                }
            }}/>
    )

}

I have tried using Bar instead of Chart, which yields in a slightly different result

while also adding a typescript error, saying how Bar does not have a type prop. I also tried adding type: "candlestick" to the dataset in chartData. But in both Chart and Bar cases, it yields the same result as the first picture, but produces a typescript error about how the chartData dataset is incompatible with the expected one. Here is what and how I register the scales and elements

Chart.register(CategoryScale, TimeScale, CandlestickController, CandlestickElement);

I have tried looking at all the examples, and stackoverflow posts I could find. I only found a single post with the same issue, despite them not using react, but that post has gotten zero answers.