diff --git a/components/segmented/demo/basic.md b/components/segmented/demo/basic.md
index 382531e8a039..3bae8b1f6626 100644
--- a/components/segmented/demo/basic.md
+++ b/components/segmented/demo/basic.md
@@ -16,10 +16,7 @@ The most basic usage.
 ```jsx
 import { Segmented } from 'antd';
 
-ReactDOM.render(
-  <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />,
-  mountNode,
-);
+export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
 ```
 
 ```css
diff --git a/components/segmented/demo/block.md b/components/segmented/demo/block.md
index ef311f8274dc..ab2bdced3e29 100644
--- a/components/segmented/demo/block.md
+++ b/components/segmented/demo/block.md
@@ -16,8 +16,7 @@ title:
 ```jsx
 import { Segmented } from 'antd';
 
-ReactDOM.render(
-  <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />,
-  mountNode,
+export default () => (
+  <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
 );
 ```
diff --git a/components/segmented/demo/controlled.md b/components/segmented/demo/controlled.md
index 523849d9b018..11f2ae204aee 100644
--- a/components/segmented/demo/controlled.md
+++ b/components/segmented/demo/controlled.md
@@ -13,12 +13,12 @@ title:
 
 Controlled Segmented.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Segmented } from 'antd';
 
 const Demo: React.FC = () => {
-  const [value, setValue] = useState('Map');
+  const [value, setValue] = useState<string | number>('Map');
 
   return (
     <Segmented
@@ -29,5 +29,5 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default Demo;
 ```
diff --git a/components/segmented/demo/custom.md b/components/segmented/demo/custom.md
index eef9d749c7c7..e88b41d1c876 100644
--- a/components/segmented/demo/custom.md
+++ b/components/segmented/demo/custom.md
@@ -17,7 +17,7 @@ Custom each Segmented Item by ReactNode.
 import { Avatar, Segmented } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Segmented
       options={[
@@ -91,7 +91,6 @@ ReactDOM.render(
         },
       ]}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/segmented/demo/disabled.md b/components/segmented/demo/disabled.md
index a560c89c27db..df9699a2794c 100644
--- a/components/segmented/demo/disabled.md
+++ b/components/segmented/demo/disabled.md
@@ -16,7 +16,7 @@ Disabled Segmented.
 ```jsx
 import { Segmented } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Segmented options={['Map', 'Transit', 'Satellite']} disabled />
     <br />
@@ -29,7 +29,6 @@ ReactDOM.render(
         'Yearly',
       ]}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/segmented/demo/size.md b/components/segmented/demo/size.md
index 009a8b314552..92fe41dfc0a5 100644
--- a/components/segmented/demo/size.md
+++ b/components/segmented/demo/size.md
@@ -16,14 +16,13 @@ There are three sizes of an Segmented: `large` (40px), `default` (32px) and `sma
 ```jsx
 import { Segmented } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
     <br />
     <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
     <br />
     <Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/segmented/demo/with-icon.md b/components/segmented/demo/with-icon.md
index 851986091602..7d4855c3e865 100644
--- a/components/segmented/demo/with-icon.md
+++ b/components/segmented/demo/with-icon.md
@@ -17,7 +17,7 @@ Set `icon` for Segmented Item.
 import { Segmented } from 'antd';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Segmented
     options={[
       {
@@ -31,7 +31,6 @@ ReactDOM.render(
         icon: <AppstoreOutlined />,
       },
     ]}
-  />,
-  mountNode,
+  />
 );
 ```