When form validation trigger on the add or update product, the cropped image disappear.

[Duckinm]

croppedImage doesn't generate path and preview so I do rewrite some code with better type guard using satisfies

const onCrop = React.useCallback(() => {
    if (!files || !cropperRef.current) return
    setCropData(cropperRef.current?.cropper.getCroppedCanvas().toDataURL())

    cropperRef.current?.cropper.getCroppedCanvas().toBlob((blob) => {
      if (!blob) return
      const croppedImage = new File([blob], file.name, {
        type: file.type,
        lastModified: Date.now(),
      })
      files.splice(i, 1, croppedImage as FileWithPreview)
      setValue(name, files as PathValue<TFieldValues, Path<TFieldValues>>)
    })
  }, [file.name, file.type, files, i, name, setValue])

const onCrop = React.useCallback(() => {
    if (!files || !cropperRef.current) return

    const croppedCanvas = cropperRef.current?.cropper.getCroppedCanvas()
    setCropData(croppedCanvas.toDataURL())

    croppedCanvas.toBlob((blob) => {
      if (!blob) {
        console.error("Blob creation failed")
        return
      }
      const croppedImage = new File([blob], file.name, {
        type: file.type,
        lastModified: Date.now(),
      })

      const croppedFile = Object.assign(croppedImage, {
        preview: URL.createObjectURL(croppedImage),
        path: file.name,
      }) satisfies FileWithPreview

      const newFiles = [...files]
      newFiles.splice(i, 1, croppedFile)
      setValue(name, newFiles as PathValue<TFieldValues, Path<TFieldValues>>)
    })
  }, [file.name, file.type, files, i, name, setValue])