diff --git a/package.json b/package.json
index 198c7455..f6ba6184 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@rc-component/motion": "^1.1.4",
     "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.3.0",
-    "classnames": "2.x",
+    "clsx": "^2.1.1",
     "rc-overflow": "^1.3.1"
   },
   "devDependencies": {
diff --git a/src/Divider.tsx b/src/Divider.tsx
index 616af405..a30b177c 100644
--- a/src/Divider.tsx
+++ b/src/Divider.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { MenuContext } from './context/MenuContext';
 import { useMeasure } from './context/PathContext';
 import type { MenuDividerType } from './interface';
@@ -15,10 +15,6 @@ export default function Divider({ className, style }: DividerProps) {
   }
 
   return (
-    <li
-      role="separator"
-      className={classNames(`${prefixCls}-item-divider`, className)}
-      style={style}
-    />
+    <li role="separator" className={clsx(`${prefixCls}-item-divider`, className)} style={style} />
   );
 }
diff --git a/src/Menu.tsx b/src/Menu.tsx
index 2bca5add..b87d2024 100644
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import Overflow from 'rc-overflow';
 import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
@@ -563,7 +563,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
       prefixCls={`${prefixCls}-overflow`}
       component="ul"
       itemComponent={MenuItem}
-      className={classNames(
+      className={clsx(
         prefixCls,
         `${prefixCls}-root`,
         `${prefixCls}-${internalMode}`,
diff --git a/src/MenuItem.tsx b/src/MenuItem.tsx
index 6b179e73..952ee41b 100644
--- a/src/MenuItem.tsx
+++ b/src/MenuItem.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Overflow from 'rc-overflow';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import omit from '@rc-component/util/lib/omit';
@@ -214,7 +214,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
         ...directionStyle,
         ...style,
       }}
-      className={classNames(
+      className={clsx(
         itemCls,
         {
           [`${itemCls}-active`]: active,
diff --git a/src/MenuItemGroup.tsx b/src/MenuItemGroup.tsx
index 7bc04740..9de75f26 100644
--- a/src/MenuItemGroup.tsx
+++ b/src/MenuItemGroup.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import omit from '@rc-component/util/lib/omit';
 import * as React from 'react';
 import { MenuContext } from './context/MenuContext';
@@ -30,11 +30,11 @@ const InternalMenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps
       role="presentation"
       {...restProps}
       onClick={e => e.stopPropagation()}
-      className={classNames(groupPrefixCls, className)}
+      className={clsx(groupPrefixCls, className)}
     >
       <div
         role="presentation"
-        className={classNames(`${groupPrefixCls}-title`, menuClassNames?.listTitle)}
+        className={clsx(`${groupPrefixCls}-title`, menuClassNames?.listTitle)}
         style={styles?.listTitle}
         title={typeof title === 'string' ? title : undefined}
       >
@@ -42,7 +42,7 @@ const InternalMenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps
       </div>
       <ul
         role="group"
-        className={classNames(`${groupPrefixCls}-list`, menuClassNames?.list)}
+        className={clsx(`${groupPrefixCls}-list`, menuClassNames?.list)}
         style={styles?.list}
       >
         {children}
diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx
index cd4f46bc..a2a33946 100644
--- a/src/SubMenu/PopupTrigger.tsx
+++ b/src/SubMenu/PopupTrigger.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Trigger from '@rc-component/trigger';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import raf from '@rc-component/util/lib/raf';
 import type { CSSMotionProps } from '@rc-component/motion';
 import { MenuContext } from '../context/MenuContext';
@@ -96,11 +96,9 @@ export default function PopupTrigger({
   return (
     <Trigger
       prefixCls={prefixCls}
-      popupClassName={classNames(
+      popupClassName={clsx(
         `${prefixCls}-popup`,
-        {
-          [`${prefixCls}-rtl`]: rtl,
-        },
+        { [`${prefixCls}-rtl`]: rtl },
         popupClassName,
         rootClassName,
       )}
diff --git a/src/SubMenu/SubMenuList.tsx b/src/SubMenu/SubMenuList.tsx
index 732fa097..5fcf9e53 100644
--- a/src/SubMenu/SubMenuList.tsx
+++ b/src/SubMenu/SubMenuList.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { MenuContext } from '../context/MenuContext';
 
-export interface SubMenuListProps
-  extends React.HTMLAttributes<HTMLUListElement> {
+export interface SubMenuListProps extends React.HTMLAttributes<HTMLUListElement> {
   children?: React.ReactNode;
 }
 
@@ -15,7 +14,7 @@ const InternalSubMenuList = (
 
   return (
     <ul
-      className={classNames(
+      className={clsx(
         prefixCls,
         rtl && `${prefixCls}-rtl`,
         `${prefixCls}-sub`,
@@ -33,6 +32,9 @@ const InternalSubMenuList = (
 };
 
 const SubMenuList = React.forwardRef(InternalSubMenuList);
-SubMenuList.displayName = 'SubMenuList';
+
+if (process.env.NODE_ENV !== 'production') {
+  SubMenuList.displayName = 'SubMenuList';
+}
 
 export default SubMenuList;
diff --git a/src/SubMenu/index.tsx b/src/SubMenu/index.tsx
index b419cd5c..fc9debe2 100644
--- a/src/SubMenu/index.tsx
+++ b/src/SubMenu/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Overflow from 'rc-overflow';
 import warning from '@rc-component/util/lib/warning';
 import SubMenuList from './SubMenuList';
@@ -339,7 +339,7 @@ const InternalSubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, re
       {...restProps}
       component="li"
       style={style}
-      className={classNames(subMenuPrefixCls, `${subMenuPrefixCls}-${mode}`, className, {
+      className={clsx(subMenuPrefixCls, `${subMenuPrefixCls}-${mode}`, className, {
         [`${subMenuPrefixCls}-open`]: open,
         [`${subMenuPrefixCls}-active`]: mergedActive,
         [`${subMenuPrefixCls}-selected`]: childrenSelected,
diff --git a/tests/Private.spec.tsx b/tests/Private.spec.tsx
index 06bdac9b..29116a89 100644
--- a/tests/Private.spec.tsx
+++ b/tests/Private.spec.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 import { render } from '@testing-library/react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import Menu, { MenuItem, SubMenu } from '../src';
 
@@ -9,9 +9,7 @@ describe('Private Props', () => {
     const { container } = render(
       <Menu
         _internalRenderMenuItem={node =>
-          React.cloneElement(node, {
-            className: classnames(node.props.className, 'inject-cls'),
-          })
+          React.cloneElement(node, { className: clsx(node.props.className, 'inject-cls') })
         }
       >
         <MenuItem key="1">1</MenuItem>
@@ -27,9 +25,7 @@ describe('Private Props', () => {
         mode="inline"
         openKeys={['1']}
         _internalRenderSubMenuItem={node =>
-          React.cloneElement(node, {
-            className: classnames(node.props.className, 'inject-cls'),
-          })
+          React.cloneElement(node, { className: clsx(node.props.className, 'inject-cls') })
         }
       >
         <SubMenu key="1" title="1">