I’m using the Metronic 8 Demo4 React version.

I have a button called 'New' which upon clicking opens up a dropdown. The jsx code for dropdown is coming from a component called 'PopupDropdown'. Now I have another button to toggle to dark mode in the Navbar. The problem is arising when I'm clicking on the dropdown button right after clicking on the dark mode toggle button. Dark mode functionality and all the other tabs and links are working, but the dropdown isn't opening. I have to click on some other page tab and come back to this dropdown button to click to open again. I'm failing to understand why this is happening and I'm looking for a solution to fix this. Both the buttons are in different components.

<button type="button" className="btn btn-sm btn-light-primary" data-kt-menu-flip="top-end" 
 data-kt-menu-trigger="click" data-kt-menu-overflow="true" data-kt-menu-placement="bottom-end" data-bs-dismiss="click" data-bs-toggle="tooltip" data-bs-placement="right" title="Quick actions">
 <KTSVG path="/media/icons/duotune/arrows/arr075.svg" className="svg-icon-3"/>
 New
 <PopupDropdown />
 </button>