Need to support async function for fetch data

[thinksource]

I have just the example of XState + React + TypeScript Template

I try to add another function:

const increment = async (context) => {
  let result = 0;
  await setTimeout(() => {
    result = context.count + 1;
  }, 1000);
  return result;
};

and then I change the Machine into:

const toggleMachine = Machine<ToggleContext>({
  id: "toggle",
  initial: "inactive",
  context: {
    count: 0
  },
  states: {
    inactive: {
      on: { TOGGLE: "active" }
    },
    active: {
      entry: assign({ count: (ctx) => increment(ctx) }),
      on: { TOGGLE: "inactive" }
    }
  }
});

I find none of async function will work. How to fetch data from api for update state via Machine?

my whole example is:

https://codesandbox.io/s/thirsty-hawking-xmzlk?file=/src/index.tsx:376-676