Fixed warnings

src/components/Dashboard/common/TemplateEditor.jsx

@@ -1,4 +1,4 @@
-import { useState, useContext, useEffect, useRef } from 'react'
+import { useState, useContext, useEffect, useRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { Flex, Alert, Card, Spin, Splitter, Button, Modal, Input } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -44,25 +44,28 @@ const TemplateEditor = ({
     }
   }
 
-  function reloadPreview(content, testObject = {}, scale = 1) {
+  const reloadPreview = useCallback(
-    fetchTemplatePreview(
+    (content, testObject = {}, scale = 1) => {
-      objectData._id,
+      fetchTemplatePreview(
-      content,
+        objectData._id,
-      testObject,
+        content,
-      scale,
+        testObject,
-      (result) => {
+        scale,
-        setReloadLoading(false)
+        (result) => {
-        if (result?.error) {
+          setReloadLoading(false)
-          setPreviewError(true)
+          if (result?.error) {
-          setPreviewMessage(result.error)
+            setPreviewError(true)
-        } else {
+            setPreviewMessage(result.error)
-          setPreviewError(false)
+          } else {
-          updatePreviewContent(result.html)
+            setPreviewError(false)
-          setPreviewMessage('No issues found.')
+            updatePreviewContent(result.html)
+            setPreviewMessage('No issues found.')
+          }
         }
-      }
+      )
-    )
+    },
-  }
+    [fetchTemplatePreview, objectData?._id]
+  )
 
   // Move useEffect to component level and use state to track objectData changes
   useEffect(() => {
@@ -70,7 +73,7 @@ const TemplateEditor = ({
       console.log('PreviewScale', previewScale)
       reloadPreview(objectData.content, objectData.testObject, previewScale)
     }
-  }, [objectData, previewScale])
+  }, [objectData, previewScale, reloadPreview])
 
   return (
     <>