Hello everyone, I've reached my vercel 100gb bandwidth limit and noticed that my videos were taking a huge amount (see first screen). When I go to my page I noticed that on my page where all the videos are, they are fetched multiple times (second screen) and I don't know why. See my video card component below :

"use client";
import Image, { StaticImageData } from "next/image";
import React, { useEffect, useRef, useState } from "react";

interface IProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
  src: string;
  thumbnail: StaticImageData;
  isHovering?: boolean;
  playOnHover?: boolean;
}

const VideoCard = ({
  thumbnail,
  isHovering,
  playOnHover,
  autoPlay,
  ...props
}: IProps) => {
  const ref = useRef<HTMLVideoElement>();
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    if (autoPlay) {
      ref.current.play();
      setIsPlaying(true);
    }

    if (playOnHover) {
      if (isHovering) {
        ref.current.play();
        setIsPlaying(ref.current?.networkState === 1);
      } else {
        ref.current.pause();
        ref.current.currentTime = 0;
        setIsPlaying(false);
      }
    }
  }, [isHovering, playOnHover, autoPlay]);

  return (
    <div className="relative w-full h-full">
      <video
        className="pointer-events-none aspect-square"
        ref={ref}
        muted
        loop
        {...props}
      ></video>
      {thumbnail && (
        <div
          className={`${
            isPlaying ? "hidden" : ""
          } absolute top-0 left-0 w-full h-full after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-black after:opacity-40`}
        >
          <Image
            src={thumbnail}
            alt="Miniature"
            className="absolute top-0 left-0 w-full h-full object-cover bg-white"
          />
        </div>
      )}
    </div>
  );
};

export default VideoCard;