fix preview flicker on asset grid

components/collections/creation/UploadDetails.tsx

@@ -7,7 +7,7 @@ import { useInputState } from 'components/forms/FormInput.hooks'
 import { MetadataModal } from 'components/MetadataModal'
 import { setBaseTokenUri, setImage, useCollectionStore } from 'contexts/collection'
 import type { ChangeEvent } from 'react'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import type { UploadServiceType } from 'services/upload'
 import { getAssetType } from 'utils/getAssetType'
@@ -139,6 +139,31 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
     }
   }
 
+  const videoPreviewElements = useMemo(() => {
+    const tempArray: JSX.Element[] = []
+    assetFilesArray.forEach((assetFile) => {
+      if (getAssetType(assetFile.name) === 'video') {
+        tempArray.push(
+          <video
+            key={assetFile.name}
+            className="relative px-1 my-1 thumbnail"
+            id="video"
+            muted
+            onMouseEnter={(e) => {
+              void e.currentTarget.play()
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.pause()
+              e.currentTarget.currentTime = 0
+            }}
+            src={URL.createObjectURL(assetFile)}
+          />,
+        )
+      }
+    })
+    return tempArray
+  }, [assetFilesArray])
+
   useEffect(() => {
     try {
       checkAssetMetadataMatch()
@@ -401,7 +426,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                             htmlFor="my-modal-4"
                           >
                             {getAssetType(assetSource.name) === 'audio' && (
-                              <div className="flex relative flex-col items-center mt-2 ml-2">
+                              <div className="flex relative flex-col items-center ml-2">
                                 <img
                                   key={`audio-${index}`}
                                   alt="audio_icon"
@@ -411,15 +436,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                                 <span className="relative self-center">{assetSource.name}</span>
                               </div>
                             )}
-                            {getAssetType(assetSource.name) === 'video' && (
-                              <video
-                                id="video"
-                                muted
-                                onMouseEnter={(e) => e.currentTarget.play()}
-                                onMouseLeave={(e) => e.currentTarget.pause()}
-                                src={URL.createObjectURL(assetSource)}
-                              />
-                            )}
+                            {getAssetType(assetSource.name) === 'video' &&
+                              videoPreviewElements.filter(
+                                (videoPreviewElement) => videoPreviewElement.key === assetSource.name,
+                              )}
 
                             {getAssetType(assetSource.name) === 'image' && (
                               <img