ToastContainer component - part of post - https://aibolik.github.io/blog/creating-toast-api-with-react-hooks

ToastContainer.jsx

const Wrapper = styled.div`
  position: absolute;
  /* Top right corner */
  right: 0;
  top: 0;
`;

const ToastContainer = ({ toasts }) => {
  return createPortal(
    <Wrapper>
      {toasts.map(item => (
        <Toast key={item.id} id={item.id}>{toast.content}</Toast>
      )}
    </Wrapper>,
    document.body
  );
}