Memory leak when multiple containers are used

[roblotter]

Do you want to request a feature or report a bug?

Bug, more exactly, a memory leak

What is the current behavior?

When multiple toast containers are alive at the same time, and then some of them destroyed, the memory is not reclaimed from the destroyed containers - they still keep references of objects around until the last toast container is unmounted. Only at that point, memory is freed up correctly

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

https://v4gchd.csb.app/

The idea is to have multiple containers alive and then only destroy some of them - basically keep at least one of them around.
See video https://www.dropbox.com/s/biztkv0zcxi3vmd/Screen%20Recording%202022-06-03%20at%2011.06.09.mov?dl=0

What is the expected behavior?

For memory to be de-allocated and not leak.

[roblotter]

This is showing the retainers

[progys]

This issue is affecting us too, would be great to fix it.

[roblotter]

The key to reproduce this bug is to remove the toast containers while the notifications are still visible.

[roblotter]

@fkhadra appreciate if you can have a look at the related PR that fixes the issue. Thanks