issue in play and drag and drop multiple video

Description

when I list multiple videos and then drag videos that time my web crash for drag and drop, I use @dnd-kit/core

Reduced test case

Steps to reproduce

import React, { useState } from "react";

import { Stream } from "@cloudflare/stream-react";

interface VideoProps extends React.HTMLProps { src: string; height?: number; width?: number; loop?: boolean; className?: string; autoPlay?: boolean; muted?: boolean; cover?: boolean; onClick?: React.MouseEventHandler; controls?: boolean; children?: React.ReactNode; }

const VideoComponent: React.FC = ({ src, loop = false, className = "", autoPlay = false, muted = true, onClick, controls, children, height, width, cover = true, ...props }) => { const [loading, setLoading] =useState(true); return ( <>

  <div
    onClick={onClick}
    onMouseEnter={() => setLoading(false)}
    onMouseOut={() => setLoading(true)}
  >
    <Stream
      src={src}
      className={`w-full h-full object-center ${
        cover ? "min-w-full" : ""
      }  ${className} hello-video-comp`}
      loop={loop}
      autoplay={autoPlay}
      muted={muted}
      controls={controls}
      key={src}
    />
  </div>

  {/* <video
    onClick={onClick}
    src={src}
    className={`w-full h-full object-center ${cover ? "min-w-full" : ""}  ${className} hello-video-comp`}
    loop={loop}
    autoPlay={autoPlay}
    muted={muted}
    height={height}
    width={width}
    controls={controls}
    playsInline
    onLoadedData={() => {
        setLoading(false);
    }}
    {...props}
  >
    {children}
  </video> */}
</>

); };

export default React.memo(VideoComponent);

"use client";

import React, { SyntheticEvent, useEffect, useState } from "react"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { RxDragHandleDots2 } from "react-icons/rx"; import { SortableItemProps } from "@/types/restaurant"; import NextImage from "@/components/Common/NextImage"; import VideoComponent from "@/components/Common/VideoComponent"; import { DEFAULT_IMAGE } from "@/utils/constants"; import SectionLoader from "@/components/Common/SectionLoader"; import { CheckCircleBlue } from "@/components/Common/Icons";

const SortableEditableItem: React.FC = ({ id, dragId, image, progressInfo, errors, handleDeleteImage, handleImageChange, disabled, type, handleEditFile, isUploading, fileName, isOfficial, thumbnail_url }) => {

const [imageBlobUrl, setImageBlobUrl] = useState("");

const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: dragId ?? "", disabled: disabled }); const limitedProgress = Math.min(progressInfo?.[fileName ?? ""], 90); useEffect(() => { const imgUrl = typeof image !== "string" ? URL.createObjectURL(image as File) : (image as string); setImageBlobUrl(imgUrl); }, [image]);

  <div className="w-4/5 relative">
    <div
      className={` group relative p-0 h-[119px] w-full rounded-lg overflow-hidden`}
    >
      {type?.includes("image") && imageBlobUrl ? (
        <NextImage
          skeleton
          key={crypto.randomUUID()}
          src={imageBlobUrl}
          className={` h-full w-full`}
          alt="Image"
          height={500}
          width={500}
          onError={(e: SyntheticEvent<HTMLImageElement, Event>) => {
            e.currentTarget.src = DEFAULT_IMAGE.defaultDish;
            e.currentTarget.srcset = "";
          }}
          onLoad={() => {
            URL.revokeObjectURL(image as string);
          }}
        />
      ) : (
        <VideoComponent
          thumbnail_url={thumbnail_url}
          src={imageBlobUrl}
          className=" w-full h-full"
          key={crypto.randomUUID()}
          height={500}
          width={500}
          autoPlay={true}
          loop={true}
          muted={true}
        />
      )}

      {isOfficial && (
        <span className="px-1 h-7 flex items-center justify-center absolute right-1 top-1">
          {<CheckCircleBlue />}
        </span>
      )}

      {/* {!isUploading && (
        <div className="absolute group-hover:scale-100 scale-0 transition-all inset-0 bg-[#fcdada]/70 flex gap-3 items-center justify-center">
          <button
            type="button"
            className="text-red-500 text-2xl"
            onClick={() => {
              handleDeleteImage &&
                id !== undefined &&
                handleDeleteImage(id);
            }}
          >
            <HiOutlineTrash />
          </button>
        </div>
      )} */}
    </div>
    {errors && <p className="text-red-500 text-xs">{errors}</p>}
    {isUploading && (
      <div className="absolute inset-0 flex items-center justify-center">
        <SectionLoader size="h-10 w-10" />
      </div>
    )}
  </div>
</div>

); };

export default SortableEditableItem;

Errors

No response

What version of Video.js are you using?

v8.17.3

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

chrome

What OS(es) and version(s) does this occur with?

ubuntu

videojs / video.js