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

remix/app/routes/field.tsx

@@ -9,8 +9,11 @@ import InvalidConfig from "~/components/InvalidConfig"
 
 import { GenericObjectType } from "@contentstack/app-sdk/dist/src/types/common.types"
 import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
-import type { InsertResponse } from "~/types/imagevault"
-import { isImageVaultDAMConfig } from "~/utils/imagevault"
+import type { ImageVaultAsset, InsertResponse } from "~/types/imagevault"
+import {
+  getImageVaultAssetFromData,
+  isImageVaultDAMConfig,
+} from "~/utils/imagevault"
 
 const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
 
@@ -25,7 +28,9 @@ function FieldContent({ sdk, appConfig }: FieldContentProps) {
   )
 
   const [showDisclaimer, setShowDisclaimer] = useState(false)
-  const [fieldData, setFieldData] = useState<InsertResponse | null>()
+  const [fieldData, setFieldData] = useState<
+    InsertResponse | ImageVaultAsset | null
+  >()
   const [dataIsLoaded, setDataIsLoaded] = useState(false)
 
   const entry = sdk?.location.CustomField?.entry
@@ -76,9 +81,17 @@ function FieldContent({ sdk, appConfig }: FieldContentProps) {
   const fieldConfig = sdk.location.CustomField?.fieldConfig
   const config = { ...appConfig, ...fieldConfig }
 
+  // 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 entry.
+  const imageVaultAsset = getImageVaultAssetFromData(initialData)
+
   return (
     <Suspense fallback={<p>Loading field...</p>}>
-      <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
+      <ImageVaultDAM
+        config={config}
+        sdk={sdk}
+        imageVaultAsset={imageVaultAsset}
+      />
     </Suspense>
   )
 }