diff --git a/package.json b/package.json
index 2d394a8a..4ef3190f 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
   "dependencies": {
     "@rc-component/select": "~1.1.0",
     "@rc-component/tree": "~1.0.0",
-    "@rc-component/util": "^1.2.1",
+    "@rc-component/util": "^1.3.0",
     "classnames": "^2.3.1"
   },
   "devDependencies": {
diff --git a/src/Cascader.tsx b/src/Cascader.tsx
index 689f3e4f..9c3e08bf 100644
--- a/src/Cascader.tsx
+++ b/src/Cascader.tsx
@@ -8,7 +8,7 @@ import { BaseSelect } from '@rc-component/select';
 import type { DisplayValueType, Placement } from '@rc-component/select/lib/BaseSelect';
 import useId from '@rc-component/util/lib/hooks/useId';
 import useEvent from '@rc-component/util/lib/hooks/useEvent';
-import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
+import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
 import * as React from 'react';
 import CascaderContext from './context';
 import useDisplayValues from './hooks/useDisplayValues';
@@ -250,10 +250,8 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
   const multiple = !!checkable;
 
   // =========================== Values ===========================
-  const [rawValues, setRawValues] = useMergedState<
-    InternalValueType | undefined,
-    SingleValueType[]
-  >(defaultValue, { value, postState: toRawValues });
+  const [interanlRawValues, setRawValues] = useControlledState(defaultValue, value);
+  const rawValues = toRawValues(interanlRawValues);
 
   // ========================= FieldNames =========================
   const mergedFieldNames = React.useMemo(
@@ -272,10 +270,8 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
   // =========================== Search ===========================
   const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch, props);
   const { autoClearSearchValue = true, searchValue, onSearch } = searchConfig;
-  const [mergedSearchValue, setSearchValue] = useMergedState('', {
-    value: searchValue,
-    postState: search => search || '',
-  });
+  const [internalSearchValue, setSearchValue] = useControlledState('', searchValue);
+  const mergedSearchValue = internalSearchValue || '';
 
   const onInternalSearch: BaseSelectProps['onSearch'] = (searchText, info) => {
     setSearchValue(searchText);
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 32e734e2..f267c0cd 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import * as React from 'react';
 import type {
   CascaderProps,
@@ -78,10 +78,8 @@ export default function Panel<
   const multiple = !!checkable;
 
   // ========================= Values =========================
-  const [rawValues, setRawValues] = useMergedState<
-    InternalValueType | undefined,
-    SingleValueType[]
-  >(defaultValue, { value, postState: toRawValues });
+  const [interanlRawValues, setRawValues] = useControlledState(defaultValue, value);
+  const rawValues = toRawValues(interanlRawValues);
 
   // ========================= FieldNames =========================
   const mergedFieldNames = React.useMemo(
@@ -161,7 +159,7 @@ export default function Panel<
       expandIcon,
       loadingIcon,
       popupMenuColumnStyle: undefined,
-      optionRender
+      optionRender,
     }),
     [
       mergedOptions,