Toaster push is showing unexpected behaviour when called from useEffect

[utkarsh-alphonso]

What version of rsuite are you using?

5.5.2

What version of React are you using?

17.0.0

What version of TypeScript are you using (if any)?

No response

What browser are you using?

Chrome

Describe the Bug

In the useEffect of my form component, I trigger a notification for successful/unsuccessful submit. With rsuite v4, I had it working fine. But as soon as I migrated to v5, replacing the earlier Notification format with the one using toaster - I am encountering a bug as follows:

Uncaught TypeError: Cannot read properties of null (reading 'push')
which points to the line

return container.current.push(message)
(inside the toaster.push function)

Some other observations: If I trigger the notification from a button callback - it works. Infact once I trigger it from a callback, even the useEffect triggers work fine. Please help!

Expected Behavior

No response

To Reproduce

No response

[simonguo]

hi @utkarsh-alphonso , can you reproduce your problem with codesandbox?

[maxpou]

@simonguo I have the same issue. Any workaround?

https://codesandbox.io/s/festive-wozniak-vk379?file=/src/index.js

Edit: if you comment the line 14 on this sandbox and click the button, you will see the message: Cannot read properties of null (reading 'push').

[SevenOutman]

Closed via #2353