I'm building a video card, that when you click it, a modal pops up with a video in it. Each card is rendered from it's own object in an object array, so each has it's unique video src link. When I click a card, the current video object from the context should update with the object of the selected card, so the modal contains a new video.

Unfortunately, the modal only renders the initial video even after you click a new card and the src link updates. I'm not sure why this is happening.

Here's the code for the modal:

"use client";

import {
  ModalContext,
  ModalContextInterface,
  initialVid,
} from "@/context/ModalContext";
import { useContext, useEffect, useState } from "react";

const VideoModal = () => {
  const { video, setVideo }: ModalContextInterface = useContext(ModalContext);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (video !== initialVid) {
      setOpen(true);
    } else {
      setOpen(false);
    }
  }, [video]);



  return (
    <div
      className={`${
        open ? "opacity-100 block" : "opacity-0 hidden"
      } z-30 p-6 sm:p-8 justify-center items-center fixed top-0 bottom-0 right-0 left-0 mx-auto my-auto`}
    >

            <video
              controls
              autoPlay
              loop
              playsInline
              muted
              width={1080}
              height={1080}
              className={`h-full w-full rounded-lg bg-contain bg-center object-cover`}
            >
                <source src={video?.video} type="video/mp4" />
            </video>

    </div>
  );
};