Hello Everyone,
I'm developing a multi-step form with the following workflow:

Step 1: User enters a serial number.
onBtnClick: Make two authenticated API calls on the server side before proceeding to the next step.

Step 2: User validates the form inputs.

Step 3: User fills out additional form details.
onBtnClick: Execute three authenticated API calls from the backend before displaying a confirmation in Step 4.

Given this setup, should I implement the multi-step form using client-side state management or adopt a multi-page approach with Next.js routing?
Which information is more pertinent for an informed decision ?

Additionally, regarding useActionState. Would you use it in the following use-case ?

const [error, setError] = useState<string | null>(null);
const [isPending, startTransition] = useTransition();

  // react-hook-form

  const onSubmit = async (data: StepOneForm) => {
    startTransition(async () => {
      const response: BicycleInfo | ErrorCustom = await stepOneAction(data);

      if ("error" in response) {
        setError(response.error);
        return;
      }

      onSuccess(response);
    });
  };

I tried to apply it, but only managed to handle state changed with useEffect (eg: in the case of an error from the server action) and it didn't feel like a "best practice".

Thank you very much