Refactor ObjectSelect component to improve state management and UI structure; add useRef for tracking previous values and enhance rendering with additional div wrapper for ObjectProperty.

src/components/Dashboard/common/ObjectSelect.jsx

@@ -1,4 +1,11 @@
-import { useEffect, useState, useContext, useCallback, useMemo } from 'react'
+import {
+  useEffect,
+  useState,
+  useContext,
+  useCallback,
+  useMemo,
+  useRef
+} from 'react'
 import PropTypes from 'prop-types'
 import { TreeSelect, Space, Button, Input } from 'antd'
 import ReloadIcon from '../../Icons/ReloadIcon'
@@ -72,6 +79,7 @@ const ObjectSelect = ({
           })
           return {
             title: (
+              <div style={{ paddingTop: '1px' }}>
                 <ObjectProperty
                   key={object._id}
                   type='object'
@@ -80,6 +88,7 @@ const ObjectSelect = ({
                   objectData={object}
                   isEditing={false}
                 />
+              </div>
             ),
             value: object._id,
             key: object._id,
@@ -199,7 +208,7 @@ const ObjectSelect = ({
         return prev
       })
     }
-  }, [objectPropertiesTree, properties, type, buildTreeData])
+  }, [objectPropertiesTree, properties, buildTreeData])
 
   useEffect(() => {
     if (value && typeof value === 'object' && value !== null && !initialized) {
@@ -236,6 +245,24 @@ const ObjectSelect = ({
     token
   ])
 
+  const prevValuesRef = useRef({ type, masterFilter })
+
+  useEffect(() => {
+    const prevValues = prevValuesRef.current
+
+    // Deep comparison for objects, simple comparison for primitives
+    const hasChanged =
+      prevValues.type !== type ||
+      JSON.stringify(prevValues.masterFilter) !== JSON.stringify(masterFilter)
+
+    if (hasChanged) {
+      setObjectPropertiesTree({})
+      setTreeData([])
+      setInitialized(false)
+      prevValuesRef.current = { type, masterFilter }
+    }
+  }, [type, masterFilter])
+
   // --- Error UI ---
   if (error) {
     return (