React-toastify toasts cannot be clicked inside a Dialog component

[Supcar27]

headlessui React v1.7

I used the Dialog component to make a drawer component and i noticed when the drawer is open i cannot click on toast messages coming from react-toastify, and if there is a button on the drawer in the spot where the toast message appears when clicked it will actually click the drawer button like the toast is not there

Any ideas what can cause this effect and how to fix this?

Thanks in advance!

[Supcar27]

for anyone having this issue i solved this by having more then 1 toast container. What i found is as long as the container is within the Dialog (Drawer) the toasts can be interacted with but when the toast container is just in the App.tsx then when drawer is open toasts cannot be interacted with.

Hope this helps!