React bootstrap dropdown stopped working after updating react

[vishalqss]

I am using dropdown from react bootstrap and it has stopped working as nothing is happening after clicking the dropdown button also there are no error coming on console for any click event.

I have been facing this issue after updating react from version 16.12.0 to 17.0.2, for confirmation I even went to the previous react version and it was working fine then.

Current version of my react-bootstrap package is 0.32.4

Note : I can't upgrade React Bootstrap and Bootstrap to the latest versions as there are many breaking changes.

Implementation of the dropdown component for reference:

import React from "react";
import DropdownButton from "react-bootstrap/es/DropdownButton";
import MenuItem from "react-bootstrap/es/MenuItem";
import ButtonToolbar from "react-bootstrap/es/ButtonToolbar";

/**
 * Render the dropdown menu
 * @component
 * 
 */
function CustomDropdownMenu(props) {
  const {cls, title, menuItemList = [], key, selected} = props;
  // console.log('menu item list ',JSON.stringify(menuItemList))
  return (
    <DropdownButton bsStyle={`${cls}`} title={title} key={`dropdown-${key}`} id={`dropdown-basic-${key}`}>
      {/* See in promotion table, how to get Menu Item List */}
      {(menuItemList && menuItemList.length) && menuItemList.map((v,k) => {
        if(v.divider){
         return <MenuItem eventKey={k} divider/>
        }else if ((v.label || v.value) && v.onClick){
          return <MenuItem eventKey={k} key={k} value={v.value} onClick={v.onClick} 
                           active={selected && selected == v.value}>{v.label || v.value}</MenuItem>
        }
      })}
    </DropdownButton>
  );
}

export default CustomDropdownMenu;

Kindly provide a solution if anyone has run into a similar type of problem.

[kyletsang]

Dupe of #5561. Update your react-overlays transitive dependency and it should work.