So I want display a stepper with 3 steps at the top and the content of the step below it.
in the first step f.e., I must fetch the user from supabase to see if they're logged in, and if they are, immediately advance to step 2.

BUT, the parent must obviously have state, in order to decide what step (and that steps content) to display, and if the parent has state the <StepXContent>'s cant fetch data with async await on serverside because they will also become clientside.

Demonstration:

<>
      <Stepper state={state}></Stepper>
      <Suspense fallback = {<Loading />}>
        {currentStep === 0? <Step0Content></Step0Content> : null} <-- cant be servercomponent because of the state of it's parent, but needs to fetch data async/await
        {currentStep === 1? <Step1Content></Step1Content> : null} 
        {currentStep === 2? <Step2Content></Step2Content> : null}
      </Suspense>
    </>

Does anyone have any idea how to solve this better? I'm so lost rn