Issue title: ToastManager is not visible in chrome extension
 Issue body: ### Description

When I use toast() in chrome extension I would expect the toast to be visible 

### Link to Reproduction

https://github.com/capaj/react-typescript-web-extension-starter

### Steps to reproduce

This is the DOM I see in my inspector:

![image](https://user-images.githubusercontent.com/1305378/130662627-78e302f1-d080-4e3f-a5e4-2874e7095800.png)

I can tweak the DOM to get it to display:
![image](https://user-images.githubusercontent.com/1305378/130663024-313c0c0e-9424-4281-be92-ebf29bc75d4e.png)

but it really should show up by default

### Chakra UI Version

1.6.6

### Browser

Chrome

### Operating System

- [ ] macOS
- [ ] Windows
- [X] Linux

### Additional Information

_No response_
 Comments: 
 Comment 0: Hi!
This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

 Comment 1: cc @segunadebayo 
 Comment 2: > It's probably because `ToastManager` is a hack, is mounted on module import as a side effect and is not part of the react component tree and does not unmount when the main component tree is unmounted, leaking memory in scenarios where a component tree is mounted/unmounted (like micro-frontends) and doesn't work in cases where react component tree is rendered into another document than `globalThis.document`.

I had the same problem, in micro-frontends.
![WX20220309-180119](https://user-images.githubusercontent.com/12584040/157418888-573d875c-7878-47fa-9520-6a9455921024.png)

 Comment 3: In the roadmap, I see that there are plans to fix toast manager, let's see how that goes.
 Comment 4: Hi all, I'm running into similar issues as noted by @anilanar and @donniean -- for example, I run into this memory leak issue using toasts in conjunction with next. Is this a specific issue related to SSR? I've noticed in the community Discord channel many others have ran into this issue as well. We would prefer to use the Toast component in our app but are blocked by this. 🙏 @anilanar - Are you able to link where you're seeing those planes to fix the toast manager? 
 Comment 5: @LKCSmith Here is the roadmap: https://github.com/chakra-ui/chakra-ui/projects/6#card-70244337
 Comment 6: Hi!
This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

{'source': 'GithubIssues', 'repo_name_with_owner': 'chakra-ui/chakra-ui', 'issue_id': 978331928, 'repo_stars': 29564.0}