XState `ActorProvider` bug

While I was working with my first project using XState, Astro and React I stumbled upon this nasty error.

Uncaught Error: You used a hook from "ActorProvider" but it's not inside a component.

I only found one issue in Github related to this HMR crash (under very specific circumstances)

// onboarding-form.ts
import { Step1 } from './step-1';

export const MachineContext = createActorContext(machine);

export function OnboardingForm() {
  return (
    <OnboardingMachineContext.Provider>
      <Onboarding />
    </OnboardingMachineContext.Provider>
  );
}

Then I thought it was related to circular dependencies since I was importing the MachineContext in my Step1, then I created the context in a separate file onboarding-machine-context and import it

// onboarding-form.ts
import { Step1 } from './step-1';
import { MachineContext } from './onboarding-machine-context'

export function OnboardingForm() {
  return (
    <OnboardingMachineContext.Provider>
      <Onboarding />
    </OnboardingMachineContext.Provider>
  );
}

And it fixed it. Hope this can help someone else.