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

rte/components/ImageElement.tsx

@@ -1,5 +1,5 @@
 import { Icon, Tooltip, cbModal } from "@contentstack/venus-components"
-import React, { PropsWithChildren, useCallback, useEffect } from "react"
+import React, { PropsWithChildren, useCallback } from "react"
 
 import EmbedBtn from "./EmbedBtn"
 import ImageEditModal from "./ImageEditModal"
@@ -19,6 +19,7 @@ type ImageElementProps = PropsWithChildren & {
   rte: IRteParam
 }
 export function ImageElement({ children, element, rte }: ImageElementProps) {
+  const isAssetInsertResponse = isInsertResponse(element.attrs)
   const imageVaultAsset = getImageVaultAssetFromData(element.attrs)
   const isSelected = rte.selection.isSelected()
   const isFocused = rte.selection.isFocused()
@@ -62,14 +63,6 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
     })
   }, [element, handleMedia])
 
-  // 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 RTE.
-  useEffect(() => {
-    if (isInsertResponse(element.attrs) && imageVaultAsset) {
-      handleMedia(imageVaultAsset)
-    }
-  }, [element.attrs, imageVaultAsset, handleMedia])
-
   const ToolTipButtons = () => {
     return (
       <div contentEditable={false} className="embed--btn-group">
@@ -91,6 +84,11 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
   if (!imageVaultAsset) {
     return <>{children}</>
   }
+  // 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 RTE.
+  if (isAssetInsertResponse) {
+    handleMedia(imageVaultAsset)
+  }
 
   return (
     <Tooltip