diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx
index eddfd263af..892bd355fc 100644
--- a/components/button/__tests__/index.test.tsx
+++ b/components/button/__tests__/index.test.tsx
@@ -88,7 +88,7 @@ describe('Button', () => {
   });
 
   it('renders Chinese characters correctly in HOC', () => {
-    const Text = ({ children }: { children: React.ReactNode }) => <span>{children}</span>;
+    const Text: React.FC<React.PropsWithChildren> = ({ children }) => <span>{children}</span>;
     const { container, rerender } = render(
       <Button>
         <Text>按钮</Text>
diff --git a/components/form/demo/form-item-path.tsx b/components/form/demo/form-item-path.tsx
index 969128a35e..423e23f636 100644
--- a/components/form/demo/form-item-path.tsx
+++ b/components/form/demo/form-item-path.tsx
@@ -6,14 +6,16 @@ const MyFormItemContext = React.createContext<(string | number)[]>([]);
 
 interface MyFormItemGroupProps {
   prefix: string | number | (string | number)[];
-  children: React.ReactNode;
 }
 
 function toArr(str: string | number | (string | number)[]): (string | number)[] {
   return Array.isArray(str) ? str : [str];
 }
 
-const MyFormItemGroup = ({ prefix, children }: MyFormItemGroupProps) => {
+const MyFormItemGroup: React.FC<React.PropsWithChildren<MyFormItemGroupProps>> = ({
+  prefix,
+  children,
+}) => {
   const prefixPath = React.useContext(MyFormItemContext);
   const concatPath = React.useMemo(() => [...prefixPath, ...toArr(prefix)], [prefixPath, prefix]);
 
diff --git a/components/grid/demo/flex-align.tsx b/components/grid/demo/flex-align.tsx
index 35cce7d4aa..f69472d09b 100644
--- a/components/grid/demo/flex-align.tsx
+++ b/components/grid/demo/flex-align.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Col, Divider, Row } from 'antd';
 
-const DemoBox: React.FC<{ children: React.ReactNode; value: number }> = (props) => (
+const DemoBox: React.FC<React.PropsWithChildren<{ value: number }>> = (props) => (
   <p className={`height-${props.value}`}>{props.children}</p>
 );
 
diff --git a/components/table/demo/edit-cell.tsx b/components/table/demo/edit-cell.tsx
index 684785e84c..8d4c0769da 100644
--- a/components/table/demo/edit-cell.tsx
+++ b/components/table/demo/edit-cell.tsx
@@ -31,13 +31,12 @@ const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
 interface EditableCellProps {
   title: React.ReactNode;
   editable: boolean;
-  children: React.ReactNode;
   dataIndex: keyof Item;
   record: Item;
   handleSave: (record: Item) => void;
 }
 
-const EditableCell: React.FC<EditableCellProps> = ({
+const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
   title,
   editable,
   children,
diff --git a/components/table/demo/edit-row.tsx b/components/table/demo/edit-row.tsx
index 04831340f1..65a39af644 100644
--- a/components/table/demo/edit-row.tsx
+++ b/components/table/demo/edit-row.tsx
@@ -25,10 +25,9 @@ interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   inputType: 'number' | 'text';
   record: Item;
   index: number;
-  children: React.ReactNode;
 }
 
-const EditableCell: React.FC<EditableCellProps> = ({
+const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
   editing,
   dataIndex,
   title,
diff --git a/components/tooltip/demo/disabled-children.tsx b/components/tooltip/demo/disabled-children.tsx
index 976e52e54c..fbacaf5959 100644
--- a/components/tooltip/demo/disabled-children.tsx
+++ b/components/tooltip/demo/disabled-children.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Checkbox, Input, InputNumber, Select, Space, Tooltip } from 'antd';
 
-const WrapperTooltip: React.FC<{ children?: React.ReactNode }> = (props) => (
+const WrapperTooltip: React.FC<React.PropsWithChildren> = (props) => (
   <Tooltip title="Thanks for using antd. Have a nice day!" {...props} />
 );
 
diff --git a/docs/blog/config-provider-style.en-US.md b/docs/blog/config-provider-style.en-US.md
index 3adddd85f0..e4199785b6 100644
--- a/docs/blog/config-provider-style.en-US.md
+++ b/docs/blog/config-provider-style.en-US.md
@@ -80,7 +80,7 @@ const useButtonStyle = () => {
   }))();
 };
 
-function GeekProvider(props: { children?: React.ReactNode }) {
+function GeekProvider(props: React.PropsWithChildren) {
   const { styles } = useButtonStyle();
 
   return <ConfigProvider button={{ className: styles.btn }}>{props.children}</ConfigProvider>;
@@ -92,7 +92,7 @@ function GeekProvider(props: { children?: React.ReactNode }) {
 It's also easy to extend for scenarios that need to inherit `className`:
 
 ```tsx
-function GeekProvider(props: { children?: React.ReactNode }) {
+function GeekProvider(props: React.PropsWithChildren) {
   const { button } = React.useContext(ConfigProvider.ConfigContext);
   const { styles } = useButtonStyle();
 
diff --git a/tests/__mocks__/rc-util/lib/Portal.tsx b/tests/__mocks__/rc-util/lib/Portal.tsx
index af5bba04af..b00287b9c5 100644
--- a/tests/__mocks__/rc-util/lib/Portal.tsx
+++ b/tests/__mocks__/rc-util/lib/Portal.tsx
@@ -5,11 +5,7 @@ import { TriggerMockContext } from '../../../shared/demoTestContext';
 let OriginPortal = jest.requireActual('rc-util/lib/Portal');
 OriginPortal = OriginPortal.default ?? OriginPortal;
 
-interface MockPortalProps {
-  children?: React.ReactNode
-}
-
-class MockPortal extends React.Component<MockPortalProps> {
+class MockPortal extends React.Component<React.PropsWithChildren> {
   container: boolean | undefined;
 
   static contextType = TriggerMockContext;
@@ -32,7 +28,7 @@ class MockPortal extends React.Component<MockPortalProps> {
   }
 }
 
-const CustomPortal = React.forwardRef<PortalRef, PortalProps | MockPortalProps>((props, ref) => {
+const CustomPortal = React.forwardRef<PortalRef, PortalProps | React.PropsWithChildren>((props, ref) => {
   const context = React.useContext(TriggerMockContext);
   if (context?.mock === false) {
     return <OriginPortal {...props} ref={ref} />;