Select mode="multiple" throws useLayoutEffect warning in Next.js

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Reproduce locally

npx create-next-app nextjs-antd-select-bug
cd nextjs-antd-select-bug
npm install antd
npm run dev

Edit pages/index.js

import {Select} from "antd";
import "antd/dist/antd.css";

export default function Page() {
  return (
    <div>
      <Select 
        mode="multiple" 
        style={{width: "300px"}}
      >
	      <Select.Option value="A">Option A</Select.Option>
	      <Select.Option value="B">Option B</Select.Option>
      </Select>
    </div>
  )
}

Open http://localhost:3000/ The warning is logged in the server console with every page refresh

Reproduce on Codesandbox

1. Open https://codesandbox.io/s/awesome-moser-wr83y
2. Hit Refresh button in the Browser panel
3. The warning is logged in the Terminal log

What is expected?

No exceptions or warnings are expected.

What is actually happening?

The following warning is logged upon every single page refresh.

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. Toavoid this, useLayoutEffect should only be used in components that renderexclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at Overflow (/sandbox/node_modules/rc-overflow/lib/Overflow.js:35:32)
    at SelectSelector (/sandbox/node_modules/rc-select/lib/Selector/MultipleSelector.js:36:18)
    at div
    at Selector (/sandbox/node_modules/rc-select/lib/Selector/index.js:36:35)
    at Trigger (/sandbox/node_modules/rc-trigger/lib/index.js:79:36)
    at SelectTrigger (/sandbox/node_modules/rc-select/lib/SelectTrigger.js:66:25)
    at div
    at Select (/sandbox/node_modules/rc-select/lib/generate.js:88:34)
    at Select (/sandbox/node_modules/rc-select/lib/Select.js:95:34)
    at InternalSelect (/sandbox/node_modules/antd/lib/select/index.js:55:31)
    at div
    at Page
    at App (webpack-internal:///./node_modules/next/dist/pages/_app.js:31:1)
    at AppContainer (/sandbox/node_modules/next/dist/next-server/server/render.js:28:859)

Environment	Info
antd	4.15.4
React	17.0.2
System	macOS Big Sur 11.3
Browser	Safari 14.1

[benjie]

I’m getting the same issue with the Menu component also triggering this rc-overflow behaviour:

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 Overflow (/home/benjie/Dev/graphile/starter/node_modules/rc-overflow/lib/Overflow.js:42:32)
    at InheritableContextProvider (/home/benjie/Dev/graphile/starter/node_modules/rc-menu/lib/context/MenuContext.js:39:23)
    at Menu (/home/benjie/Dev/graphile/starter/node_modules/rc-menu/lib/Menu.js:76:32)
    at InternalMenu (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/menu/index.js:71:37)
    at Menu (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/menu/index.js:162:37)
    at div
    at aside
    at Sider (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/Sider.js:74:31)
    at section
    at BasicLayout (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:93:34)
    at Layout (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:61:37)
    at main
    at Basic (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:78:25)
    at Content (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:61:37)
    at section
    at BasicLayout (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:93:34)
    at Layout (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:61:37)
    at SharedLayout (webpack-internal:///../../components/dist/SharedLayout.js:57:20)
    at SettingsLayout (webpack-internal:///../../components/dist/SettingsLayout.js:47:20)
    at Settings_Profile (webpack-internal:///./pages/settings/index.tsx:48:62)
    at ApolloProvider (/home/benjie/Dev/graphile/starter/node_modules/@apollo/client/react/context/context.cjs.js:32:21)
    at MyApp (webpack-internal:///./pages/_app.tsx:49:1)
    at WithApollo(MyApp) (/home/benjie/Dev/graphile/starter/node_modules/next-with-apollo/lib/withApollo.js:84:29)
    at AppContainer (/home/benjie/Dev/graphile/starter/node_modules/next/dist/next-server/server/render.js:28:952)

Affects version 4.16.0; 4.15.6 doesn’t have this issue.

[HADB]

+1 Menu also has this problem. version: 4.16.0 Downgrading to 4.15.6 fixs the problem.

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 Overflow (****/node_modules/rc-overflow/lib/Overflow.js:42:32)
    at InheritableContextProvider (****/node_modules/rc-menu/lib/context/MenuContext.js:39:23)
    at Menu (****/node_modules/rc-menu/lib/Menu.js:76:32)
    at InternalMenu (****/node_modules/antd/lib/menu/index.js:71:37)
    at Menu (****/node_modules/antd/lib/menu/index.js:162:37)
    at div
    at aside
    at Sider (****/node_modules/antd/lib/layout/Sider.js:74:31)
    at section
    at BasicLayout (****/node_modules/antd/lib/layout/layout.js:93:34)
    at Layout (****/node_modules/antd/lib/layout/layout.js:61:37)
    at MainLayout (webpack-internal:///./src/components/main-layout.tsx:24:54)
    at Home
    at App (webpack-internal:///./src/pages/_app.tsx:33:3)
    at AppContainer (****/node_modules/next/dist/next-server/server/render.js:28:861)