Have an ability to retain multiple toasts while multiple redirects

[tats-u]

flowchart TD

A(Old URL of a member-only page) --"Toast: ”The URL of this page has been changed. Update your bookmark.”"--> B(Current URL of a member-only page)
B --"Toast: “You should login first to view this page.”"--> C(Login page)

Loading

remix-toast must have an ability yo retain both toasts while the above double redirects and show both of them in the login page.
However, getToast in the login page can get only the "You should login first to view this page" toast.
A new API getToasts looks like:

export const loader = async ({ request, context }: Route.LoaderArgs) => {
  // Extracts the toast from the request
  const toasts = getToasts(context);
  // pass it to the client side
  return { toasts }
}

export default function LoginPage({ loaderData }: Route.ComponentArgs) {
  const { toasts } = loaderData

  useEffect(() => {
   for(const toast of (toasts ?? [])){
    // Call your toast function here
    alert(toast.message);
   }
  }, [...(toasts ?? [])])

  return (
    ...
  );
}