Dropdown overlay is deprecated - antd 5 migration issue

Question

We use antd 4.22.8 in our project and upgraded React from 17 to 18 recently. At this point, some antd basic stuff (such as tooltips and checkboxes) stopped to work under certain circumstances in development mode due to React StrictMode. I found this Github discussion of possibility to disable strict mode in a subtree as a quick temporary fix but it seems that React developers are adamant and have no plans to support it.

So the only way to have strict mode enabled now is to upgrade antd to recent 5.x.y version where all (or almost all) issues related to strict mode are fixed (I hope).

The first step is to make minor upgrade of antd (to 4.24.14 at the moment of writing) according to the migration guide. Most of new warnings were easy to fix but I'm stuck on the following:

Warning: [antd: Dropdown] overlay is deprecated. Please use menu instead.

Deprecated overlay accepts ReactElement but new menu property is MenuProps only:

export interface MenuProps extends Omit<RcMenuProps, 'items'> {
    theme?: MenuTheme;
    inlineIndent?: number;
    items?: ItemType[];
}

The problem is that Dropdown is used with custom content (not menus) being passed as overlay in multiple places so menu property is not suitable for them. I wonder what to do about it? Should I dig into react-components and old implementation of Dropdown and implement my own dropdown that supports custom content? Or is there a way to make this easier using some antd components?

Unfortunately the warning above doesn't describe the case like this, and I was unable to find any guide related to this in the docs. All Dropdown examples use menus as their contents.

Answer 1

Finally I found it in the docs:

Customize the dropdown menu via dropdownRender. If you don't need the Menu content, use the Popover component directly.