<video> tag flashes when using react query

const assetQuery = useQuery({
    queryKey: ["assets"],
    queryFn: async () => {
      const response = await fetch("/api/assets")
      const data = await response.json()

      const assetsPresignedURLs = await Promise.all(
        data.map((asset: Asset) =>
          fetch(`/api/s3/presigned-get/`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ key: asset.key }),
          })
            .then((response) => response.json())
            .then((data) => data.url)
        )
      )

      data.forEach((asset: Asset & { presignedURL: string }, index: number) => {
        asset.presignedURL = assetsPresignedURLs[index]
      })

      return data
    },
    initialData: editorAssets,
  })

const assetQuery = useQuery({
    queryKey: ["assets"],
    queryFn: async () => {
      const response = await fetch("/api/assets")
      const data = await response.json()

      const assetsPresignedURLs = await Promise.all(
        data.map((asset: Asset) =>
          fetch(`/api/s3/presigned-get/`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ key: asset.key }),
          })
            .then((response) => response.json())
            .then((data) => data.url)
        )
      )

      data.forEach((asset: Asset & { presignedURL: string }, index: number) => {
        asset.presignedURL = assetsPresignedURLs[index]
      })

      return data
    },
    initialData: editorAssets,
  })