diff --git a/packages/plugin-locale/src/templates/SelectLang.tpl b/packages/plugin-locale/src/templates/SelectLang.tpl
index c47c2ef3..b1e708c5 100644
--- a/packages/plugin-locale/src/templates/SelectLang.tpl
+++ b/packages/plugin-locale/src/templates/SelectLang.tpl
@@ -424,18 +424,28 @@ export const SelectLang: React.FC<SelectLangProps> = (props) => {
   const menuItemStyle = { minWidth: "160px" };
   const menuItemIconStyle = { marginRight: "8px" };
   const langMenu = (
-    <Menu selectedKeys={[selectedLang]} onClick={handleClick}>
-      {allLangUIConfig.map((localeObj) => {
-        return (
-          <Menu.Item key={localeObj.lang || localeObj.key} style={menuItemStyle}>
-            <span role="img" aria-label={localeObj?.label || "en-US"} style={menuItemIconStyle}>
-              {localeObj?.icon || "🌐"}
-            </span>
-            {localeObj?.label || "en-US"}
-          </Menu.Item>
-        );
+    <Menu
+      selectedKeys={[selectedLang]}
+      onClick={handleClick}
+      items={allLangUIConfig.map((localeObj) => {
+        return {
+          key: localeObj.lang || localeObj.key,
+          style: menuItemStyle,
+          label: (
+            <>
+              <span
+                role="img"
+                aria-label={localeObj?.label || "en-US"}
+                style={menuItemIconStyle}
+              >
+                {localeObj?.icon || "🌐"}
+              </span>
+              {localeObj?.label || "en-US"}
+            </>
+          ),
+        };
       })}
-    </Menu>
+    />
   );
 
   const inlineStyle = {