XState mock createActorContext

Question

I have a provider that looks like:

import { ReactNode } from 'react'
import { createActorContext } from '@xstate/react'
import mainMachine from 'machines/transmitSdk'

export const MainMachineService = createActorContext(transmitSdkMachine)

interface MainMachineProviderProps {
  children: ReactNode
}

const MainMachineProvider = ({
  children
}: MainMachineProviderProps) => (
  <MainMachineService.Provider>
    {children}
  </MainMachineService.Provider>
)

export default TransmitSdkMachineProvider

In my tests if I don't import this provider, I get the following error:

Error: Uncaught [Error: You used a hook from "ActorProvider(mainMachine)" but it's not inside a <ActorProvider(mainMachine)> component.]

I followed the xstate documentation with a model-based approach, however, this does not fix the error. When I import my provider and wrap my component in the provider in my test, it works. However, I'm having trouble updating the state. I'm new to model-based testing and not even sure it's what I need. I just want to be able to manipulate the state and see the UI is working as it should. Any direction would be greatly appreciated.