useLayoutEffect next.js warning

[HellCatVN]

I have this warning even I have try exact package document

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at InputNumber (J:\JSKingdom\novel\novel-site\node_modules\rc-input-number\lib\InputNumber.js:59:32)
    at J:\JSKingdom\novel\novel-site\node_modules\antd\lib\input-number\index.js:46:33    at div
    at div
    at div
    at Col (J:\JSKingdom\novel\novel-site\node_modules\antd\lib\grid\col.js:57:33)    
    at FormItemInput (J:\JSKingdom\novel\novel-site\node_modules\antd\lib\form\FormItemInput.js:40:25)
    at div
    at Row (J:\JSKingdom\novel\novel-site\node_modules\antd\lib\grid\row.js:52:34)    
    at FormItem (J:\JSKingdom\novel\novel-site\node_modules\antd\lib\form\FormItem.js:89:20)
    at form
    at Form (J:\JSKingdom\novel\novel-site\node_modules\rc-field-form\lib\Form.js:31:19)
    at SizeContextProvider (J:\JSKingdom\novel\novel-site\node_modules\antd\lib\config-provider\SizeContext.js:15:23)
    at InternalForm (J:\JSKingdom\novel\novel-site\node_modules\antd\lib\form\Form.js:62:27)
    at div
    at Home
    at MyApp (J:\JSKingdom\novel\novel-site\.next\server\pages\_app.js:117:3)
    at AppContainer (J:\JSKingdom\novel\novel-site\node_modules\next\dist\next-server\server\render.js:25:899)

"antd": "^4.13.0",
"next": "10.0.7",
"react": "17.0.1",
"react-dom": "17.0.1",

// index.js
import {
  Form,
  Select,
  InputNumber,
  DatePicker,
  Switch,
  Slider,
  Button,
} from 'antd';
import Link from 'next/link';

const FormItem = Form.Item;
const Option = Select.Option;

export default function Home() {
  return (
    <div style={{ marginTop: 100 }}>
      <Link href="/">
        <a> Go to index </a>
      </Link>
      <Form layout="horizontal">
        <FormItem
          label="Input Number"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 8 }}
        >
          <InputNumber
            size="large"
            min={1}
            max={10}
            style={{ width: 100 }}
            defaultValue={3}
            name="inputNumber"
          />
          <a href="#">Link</a>
        </FormItem>

        <FormItem
          label="Switch"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 8 }}
        >
          <Switch defaultChecked name="switch" />
        </FormItem>

        <FormItem
          label="Slider"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 8 }}
        >
          <Slider defaultValue={70} />
        </FormItem>

        <FormItem
          label="Select"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 8 }}
        >
          <Select
            size="large"
            defaultValue="lucy"
            style={{ width: 192 }}
            name="select"
          >
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
            <Option value="disabled" disabled>
              disabled
            </Option>
            <Option value="yiminghe">yiminghe</Option>
          </Select>
        </FormItem>

        <FormItem
          label="DatePicker"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 8 }}
        >
          <DatePicker name="startDate" />
        </FormItem>
        <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
          <Button size="large" type="primary" htmlType="submit">
            OK
          </Button>
          <Button size="large" style={{ marginLeft: 8 }}>
            Cancel
          </Button>
        </FormItem>
      </Form>
    </div>
  );
}

[SolidZORO]

This does not appear to be an error message from the plugin?

[HellCatVN]

I think this plugin is support to using working next.js and antd but It's still remain the error So I would like to know there is the way to fix it when using with plugin cause normal setting and plugin work with next.js 9 but next.js 10 warning is showing up