Display Toast at the Top Over the Portal-Based Modal.

I created the Modal as follows using a Portal.

```
//Portal.tsx
export const Portal = ({ containerId = "portal", children }: PortalProps) => {
const [container] = useState(() => {
const el = document.createElement("div");
el.id = containerId;
return el;
});

useEffect(() => {
document.body.appendChild(container);
return () => {
document.body.removeChild(container);
};
}, [container]);

return createPortal(children, container);
};
```

I have declared your toast in the Modal, and similarly, I have also declared it in app.tsx.

```
//Modal.tsx
import { ToastContainer } from "react-toastify";

```

```
//App.tsx

```

I want to display a toast at the top even within a Portal, so I've defined the toast both inside the Portal and in app.tsx.

However, while the toast does appear at the top inside the portal, it fails to execute when I attempt to trigger the toast- displaying logic after closing the portal. Since the portal unmounts, the toast also does not mount.

In other words, while the toast can be displayed on top of either the Portal or app.tsx, there is a challenge in displaying the toast when the parent component unmounts.

Even when the toast is rendered within a portal, it does not appear above the modal created by another portal, and the toast does not persist as expected.

How can I resolve this issue?

The image below shows the state when the toast is not mounted inside the modal defined in the Portal.

The image below shows the toast when declared inside the Modal. However, in this case, it is not possible to display the toast after the modal is closed.