diff --git a/components/mentions/demo/async.md b/components/mentions/demo/async.md
index da9d1ffefe..d11a2b492e 100644
--- a/components/mentions/demo/async.md
+++ b/components/mentions/demo/async.md
@@ -4,7 +4,7 @@
 
 ## en-US
 
-async
+async.
 
 <style>
 .antd-demo-dynamic-option img {
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
index 193efa9673..4850806460 100644
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -13,6 +13,21 @@ Mention component.
 
 When you need to mention someone or something.
 
+### Usage upgrade after 5.1.0
+
+<Alert message="After version 5.1.0, we provide a simpler usage &lt;Mentions options={[...]} /&gt;  with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0." />;
+
+```jsx
+// works when >=5.1.0, recommended ✅
+const options = [{ value: 'sample', label: 'sample' }];
+return <Mentions options={options} />;
+
+// works when <5.1.0, deprecated when >=5.1.0 🙅🏻‍♀️
+<Mentions onChange={onChange}>
+  <Mentions.Option value="sample">Sample</Mentions.Option>
+</Mentions>;
+```
+
 ## Examples
 
 <!-- prettier-ignore -->
@@ -26,24 +41,6 @@ When you need to mention someone or something.
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-### Usage upgrade after 5.1.0
-
-```__react
-import Alert from '../alert';
-ReactDOM.render(<Alert message="After version 5.1.0, we provide a simpler usage <Mentions options={[...]} />  with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0." />, mountNode);
-```
-
-```jsx
-// works when >=5.1.0, recommended ✅
-const options = [{ value: 'sample', label: 'sample' }];
-return <Mentions options={options} />;
-
-// works when <5.1.0, deprecated when >=5.1.0 🙅🏻‍♀️
-<Mentions onChange={onChange}>
-  <Mentions.Option value="sample">Sample</Mentions.Option>
-</Mentions>;
-```
-
 ## API
 
 ### Mention
diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md
index 0d26474c71..d8ae2d6279 100644
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@@ -14,6 +14,21 @@ demo:
 
 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
 
+### 5.1.0 用法升级
+
+<Alert message="在 5.1.0 版本后，我们提供了 &lt;Mentions options={[...]} /&gt; 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。" />;
+
+```jsx
+// >=5.1.0 可用，推荐的写法 ✅
+const options = [{ value: 'sample', label: 'sample' }];
+return <Mentions options={options} />;
+
+// <5.1.0 可用，>=5.1.0 时不推荐 🙅🏻‍♀️
+<Mentions onChange={onChange}>
+  <Mentions.Option value="sample">Sample</Mentions.Option>
+</Mentions>;
+```
+
 ## 代码演示
 
 <!-- prettier-ignore -->
@@ -27,24 +42,6 @@ demo:
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-### 5.1.0 用法升级
-
-```__react
-import Alert from '../alert';
-ReactDOM.render(<Alert message="在 5.1.0 版本后，我们提供了 <Mentions options={[...]} /> 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。" />, mountNode);
-```
-
-```jsx
-// >=5.1.0 可用，推荐的写法 ✅
-const options = [{ value: 'sample', label: 'sample' }];
-return <Mentions options={options} />;
-
-// <5.1.0 可用，>=5.1.0 时不推荐 🙅🏻‍♀️
-<Mentions onChange={onChange}>
-  <Mentions.Option value="sample">Sample</Mentions.Option>
-</Mentions>;
-```
-
 ## API
 
 ### Mentions