NextJS Cannot Render

[Normanisfine]

Hi, I am trying to use this in a Nextjs project and have this problem.
The "processing splats" keep loading but nothing can be viewd.

[Violation] 'setTimeout' handler took 116ms
gaussian-splats-3d.module.js:259 [Violation] 'setTimeout' handler took 116ms
gaussian-splats-3d.module.js:259 [Violation] 'setTimeout' handler took 89ms
gaussian-splats-3d.module.js:259 [Violation] 'setTimeout' handler took 77ms
99d7f2bf-860d-4f26-84c6-4bad50102f54:174 Uncaught (in promise) DataCloneError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': SharedArrayBuffer transfer requires self.crossOriginIsolated.
at 99d7f2bf-860d-4f26-84c6-4bad50102f54:174:26
(anonymous) @ 99d7f2bf-860d-4f26-84c6-4bad50102f54:174
Promise.then
self.onmessage @ 99d7f2bf-860d-4f26-84c6-4bad50102f54:161Understand this errorAI
e62911b9-bc54-4fd1-8fe8-0b8a0a2aa3d5:174 Uncaught (in promise) DataCloneError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': SharedArrayBuffer transfer requires self.crossOriginIsolated.
at e62911b9-bc54-4fd1-8fe8-0b8a0a2aa3d5:174:26
(anonymous) @ e62911b9-bc54-4fd1-8fe8-0b8a0a2aa3d5:174
Promise.then
self.onmessage @ e62911b9-bc54-4fd1-8fe8-0b8a0a2aa3d5:161Understand this errorAI

This is my code
'''
//components/ModelViewer.js
import React, { useEffect } from 'react';
import dynamic from 'next/dynamic';

const ModelViewer = ({ filePath }) => {
useEffect(() => {
// Dynamically import the library to ensure it loads on the client-side
import('@mkkellogg/gaussian-splats-3d').then(GaussianSplats3D => {
const viewer = new GaussianSplats3D.Viewer({
cameraUp: [0, 1, 0],
initialCameraPosition: [0,1,0],
initialCameraLookAt: [1,0,0]
});

        viewer.addSplatScene(filePath, {
            splatAlphaRemovalThreshold: 5,
            showLoadingUI: true,
            position: [0, 1, 0],
            rotation: [0, 0, 0, 1],
            scale: [1.5, 1.5, 1.5]
        })
        .then(() => {
            viewer.start();
        });
    });
}, [filePath]);

return <div id="viewerContainer" style={{ width: '100%', height: '100vh' }} />;

};

export default dynamic(() => Promise.resolve(ModelViewer), {
ssr: false
});

//page.js
'use client';

import GaussianSplatsViewer from '@/components/ModelViewer';

const Home = () => {
return (

);
};

export default Home;

'''

Thank you very much.