How to set up MongoDB Charts in Nextjs?

MongoDB Atlas MongoDB Charts
,
1

I’m trying to set up my chart in a next.js project. Here is the code:

'use client'

import { Suspense, useEffect, useRef } from "react";
import DashboardPageLoadingSkeleton from "./loading";
import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';

const Dashboard = () => {

    const chartDiv = useRef(null);

    useEffect(() => {
        const sdk = new ChartsEmbedSDK({
            baseUrl: 'MY-BASE-URL'
        });

        const chart = sdk.createChart({
            chartId: 'MY-CHART-ID',
            width: '600px',
            height: '400px',
        })
        const renderChart = async () => {
            try {
              await chart.render(chartDiv.current);
            } catch (err) {
              console.error('Error during Charts rendering.', err);
            }
        };

        renderChart();
    }, [chart])

    return (
        <>
            <Suspense fallback={<DashboardPageLoadingSkeleton />}>
                <div ref={chartDiv}>
                </div>
            </Suspense>
        </>
    )
}

export default Dashboard;

However, I’m getting the error:

ReferenceError: await is not defined at __webpack_require__

Could someone tell me why I’m getting this error, or better yet, how I could set up a chart correctly in a next.js project?
Thanks.