fix(BOOK-478): convert to image vault asset and remove useEffect max depth error

remix/app/components/ImageVaultDAM.tsx

@@ -7,16 +7,12 @@ import {
   FieldLabel,
   cbModal,
 } from "@contentstack/venus-components"
-import {
-  getImageVaultAssetFromData,
-  isInsertResponse,
-  openImageVault,
-} from "~/utils/imagevault"
+import { isInsertResponse, openImageVault } from "~/utils/imagevault"
 import ImageEditModal from "./ImageEditModal"
 
 import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
 import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
-import type { ImageVaultAsset, InsertResponse } from "~/types/imagevault"
+import type { ImageVaultAsset } from "~/types/imagevault"
 import type { Lang } from "~/types/lang"
 import type {
   EntryDataPublishDetails,
@@ -27,7 +23,7 @@ import FullSizeImage from "./FullSizeImage"
 export type ImageVaultDAMProps = {
   sdk: UiLocation
   config: ImageVaultDAMConfig
-  initialData: ImageVaultAsset | InsertResponse | null
+  imageVaultAsset: ImageVaultAsset | null
 }
 
 type DAMButtonProps = { onClick: () => void }
@@ -115,9 +111,8 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
 export default function ImageVaultDAM({
   sdk,
   config,
-  initialData,
+  imageVaultAsset,
 }: ImageVaultDAMProps) {
-  const imageVaultAsset = getImageVaultAssetFromData(initialData)
   const [media, setMedia] = useState(imageVaultAsset)
 
   const field = sdk.location.CustomField?.field
@@ -176,18 +171,16 @@ export default function ImageVaultDAM({
     updateFrameHeight()
   }, [updateFrameHeight])
 
-  // The existing data might still be in InsertResponse format if the user has not edited it yet.
-  // We'll convert it to ImageVaultAsset when the user edits the the emtry.
-  useEffect(() => {
-    if (isInsertResponse(initialData) && imageVaultAsset) {
-      handleMedia(imageVaultAsset)
-    }
-  }, [initialData, imageVaultAsset, handleMedia])
-
   if (!field || !frame || !entry || !stack) {
     return <p>Initializing custom field...</p>
   }
 
+  const fieldData = field.getData()
+
+  if (isInsertResponse(fieldData)) {
+    field.setData(imageVaultAsset)
+  }
+
   const entryData: EntryDataPublishDetails = {
     //TODO: Add support for branches
     branch: "main",