xstate-machine-provider.tsx

const AudioPrimitiveContext = React.createContext<InterpreterFrom<
  typeof audioMachine
> | null>(null);

export const AudioPrimitiveProvider = ({
  children,
}: {
  children?: React.ReactNode;
}) => {
  const [machine] = React.useState(() => {
    return audioMachine;
  });
  const audioService = useInterpret(machine);

  return (
    <AudioPrimitiveContext.Provider value={audioService}>
      {children}
    </AudioPrimitiveContext.Provider>
  );
};

export const useAudioService = () => {
  const context = React.useContext(AudioPrimitiveContext);

  if (!context) {
    throw new Error('useAudioState must be used within a AudioProvider');
  }

  return context;
};