Hi Im getting this error in my react next js app
enter image description here
Following is my index.jsx code

import Layout from "@/src/layout/Layout";
import { sliderProps } from "@/src/sliderProps";
import dynamic from "next/dynamic";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import CursorCircle from '@/src/components/CursorCircle';
import { useState, useEffect, useRef } from 'react';
import Popup from '@/src/components/Popup'; // Adjust the path accordingly

const Counter = dynamic(() => import("@/src/components/Counter"), {
  ssr: false,
});

const Index = () => {
  const [isPopupVisible, setIsPopupVisible] = useState(true);
  const videoRef = useRef(null);
  const audioContextRef = useRef(null);
  const gainNodeRef = useRef(null);

  const initAudioContext = () => {
    const video = videoRef.current;
    if (!audioContextRef.current) {
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      audioContextRef.current = audioContext;
      const track = audioContext.createMediaElementSource(video);
      const gainNode = audioContext.createGain();
      gainNodeRef.current = gainNode;

      track.connect(gainNode).connect(audioContext.destination);

      const updateVolume = () => {
        if (video) {
          const videoRect = video.getBoundingClientRect();
          const viewportHeight = window.innerHeight;
          const videoBottom = videoRect.bottom;
          const videoTop = videoRect.top;

          // Check if video is in viewport
          if (videoBottom < 0 || videoTop > viewportHeight) {
            // Video is out of viewport
            gainNode.gain.setValueAtTime(0, audioContext.currentTime);
          } else {
            // Video is in viewport
            const visibleHeight = Math.min(viewportHeight, videoBottom) - Math.max(0, videoTop);
            const visibilityRatio = visibleHeight / viewportHeight;
            gainNode.gain.setValueAtTime(visibilityRatio, audioContext.currentTime);
          }
        }
      };

      updateVolume();
      window.addEventListener('scroll', updateVolume);

      return () => {
        window.removeEventListener('scroll', updateVolume);
        audioContext.close();
      };
    }
  };

  const playVideo = () => {
    if (audioContextRef.current && audioContextRef.current.state === 'suspended') {
      audioContextRef.current.resume();
    }
    if (videoRef.current) {
      videoRef.current.play().catch((error) => {
        console.error("Error playing video:", error);
      });
    }
  };

  const handleClosePopup = () => {
    setIsPopupVisible(false);
    initAudioContext();
    playVideo();
  };

  return (
    <Layout dark>
      <CursorCircle />
      <Popup isVisible={isPopupVisible} onClose={handleClosePopup} />
      {/* Hero Section Start */}
      <section className="hero-area pt-185 rpt-150 rel z-1">
        <div className="container">
          <div className="row">
            <div className="col-lg-8">
              <div className="hero-content wow fadeInLeft delay-0-2s">
                <h1>
                  Digital <br /><span>Design</span> <i>Agency</i>
                </h1>
              </div>
            </div>
            <div className="col-lg-4">
              <div className="hero-right-image size-set-image mt-20 wow fadeInUp delay-0-4s">
                <img src="assets/images/AURALOGO.png" alt="Hero" />
              </div>
            </div>
          </div>
        </div>
        <div className="container-fluid">
          <div className="hero-bottom-image banner_height_fix">
            <video
              ref={videoRef}
              src="assets/AURAWEBsounds.mp4"
              loop
              playsInline
            ></video>
            
            <div className="hero-social">
              <a href="https://www.facebook.com/aurawebwork">
                <i className="fab fa-facebook-f" /> <span>Facebook</span>
              </a>
              <a href="https://www.linkedin.com/company/auraweb-works/">
                <i className="fab fa-linkedin" /> <span>LinkedIn</span>
              </a>
              <a href="https://www.instagram.com/aurawebworks/">
                <i className="fab fa-instagram" /> <span>Instagram</span>
              </a>
              <a href="https://github.com/Adilmehmod">
                <i className="fab fa-github" /> <span>GitHub</span>
              </a>
            </div>
          </div>
        </div>
        <div className="hero-bg">
          <img src="assets/images/hero/hero-bg.png" alt="lines" />
        </div>
      </section>
{/* About Us Section */}
{/* Service Section */}
{/* Testimonial Section */}
 {/* footer area start */}
      
    </Layout>
  );
};
export default dynamic (() => Promise.resolve(Index), {ssr: false})

The error comes when i try to close the pop up, how ever when i scroll down to the services section or below ( Whose code i haven’t given above) it works perfectly there and pop up closes playing the video

Following is my popup.jsx code

import { useRef, useEffect } from 'react';

const Popup = ({ isVisible, onClose }) => {
  const popupRef = useRef(null);

  const handleClickOutside = (event) => {
    if (popupRef.current && !popupRef.current.contains(event.target)) {
      onClose();
    }
  };

  useEffect(() => {
    if (isVisible) {
      document.addEventListener('mousedown', handleClickOutside);
    } else {
      document.removeEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isVisible]);

  if (!isVisible) {
    return null;
  }

  return (
    <div className="popup-overlay">
      <div className="popup-content" ref={popupRef}>
        <h2>Welcome to AuraWeb Works</h2>
        <p>Thank you for visiting. Please choose an option:</p>
        <button className="popup-button" onClick={() => alert('Button 1 Clicked')}>Button 1</button>
        <button className="popup-button" onClick={() => alert('Button 2 Clicked')}>Button 2</button>
        <button className="popup-close" onClick={onClose}>×</button>
      </div>
    </div>
  );
};

export default Popup;

kindly help me please, i’m a beginner

The error comes when i try to close the pop up, how ever when i scroll down to the services section or below ( Whose code i haven’t given above) it works perfectly there and pop up closes playing the video