Please help me fix this error

'use client'

import React, { useState } from "react";
import { useLocalMedia } from "@whereby.com/browser-sdk/react";
import dynamic from "next/dynamic";
const VideoPreview = dynamic(() => import('@/components/VideoPreview/VideoPreview'), { ssr: false });
const RoomConnection = dynamic(() => import('@/components//RoomConection/RoomConnection'), { ssr: false });

export default function VideoCallRoom() {
    // useState New
    const [isConnected, setIsConnected] = useState(false);
    const [displayName, setDisplayName] = useState("");
    
    // whereby
    const localMedia = useLocalMedia({ audio: true, video: true });
    const {
        toggleMicrophoneEnabled,
        toggleCameraEnabled,
    } = localMedia.actions;
    const {
        localStream,
    } = localMedia.state;
    
    // useState
    const [myName, setMyName] = useState('Easy Sunday');
    const [microphoneStatus, setMicrophoneStatus] = useState(true);
    const [cameraStatus, setCameraStatus] = useState(true);

    return (
        <>
            {!isConnected ? localStream && (
                <VideoPreview
                    ...
                />
            ) : (
                    <RoomConnection
                        ...
                />
            )}
        </>
    )
}

error

⨯ node_modules/@whereby.com/browser-sdk/dist/react/index.esm.js (297:30) @ navigator
 ⨯ ReferenceError: navigator is not defined
    at __webpack_require__ (/Users/intern-napat/sunday-repository/video-conference-frontend/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/video-call-room/page.tsx:9:88)
    at (ssr)/./src/app/video-call-room/page.tsx (/Users/intern-napat/sunday-repository/video-conference-frontend/.next/server/app/video-call-room/page.js:325:1)
    at __webpack_require__ (/Users/intern-napat/sunday-repository/video-conference-frontend/.next/server/webpack-runtime.js:33:42)
    at JSON.parse (<anonymous>)
null