Remix ActionArgs infer type for returing errors || redirect | Remix | Page 1

Hi, from my action function, i want to return an error as an action data, if there are no errors, I want the action function to return redirect,

Im stuck with the type safety when I'm returning like this at the action function

return error || redirector,

On the client side, when I'm trying to access the error?.message data, it does not allow me to do so, because the infer type said that it maybe content the type of redirect which does not have the message property.

Can someone please help me to figure this out, still new with typescript, trying to wrap my head around it, already ask chatgpt, but it return gibberish response, maybe it doesn't know remix type really well I guess

here is the code:

export const action = async ({ request }: ActionArgs) => {
  console.log("REGISTERING USER");

  let formData = await request.formData();
  let email = formData.get("email") as string;
  let name = formData.get("name") as string;
  let username = formData.get("username") as string;
  let password = formData.get("password") as string;
  let password_confirmation = formData.get("password_confirmation") as string;
  let school_level: SchoolLevel = formData.get("school_level") as SchoolLevel;

  const body = {
    email,
    name,
    username,
    password,
    password_confirmation,
    school_level,
  };

  let { error, redirector } = await register({
    request,
    body: body,
  });
  return error || redirector;
};

const Register = () => {
  const data = useActionData<typeof action>();
  console.log("data", data?.message && data.message);
  .....
}

Here is the code where I return the redirector (on the register function)

 return {
    redirector: redirect(decodeURIComponent(redirectToUrl) || "/", {
      headers: {
        "Set-Cookie": await storage.commitSession(session),
      },
    }),
  };

#Remix ActionArgs infer type for returing errors || redirect