Nested states guide incorrect about assigning machines to states

[Ghirigoro]

In the guide there's this example:

// A helper function for more easily building nested state machines.
const nested = (to, states) => createMachine(states,
  transition('done', to)
);

const stoplight = createMachine({
  green: state(
    transition('next', 'yellow')
  ),
  yellow: state(
    transition('next', 'red')
  ),
  red: nested('green', {
    walk: state(
      transition('toggle', 'dontWalk')
    ),
    dontWalk: final()
  })
});

This will result in an error if you try to transition to the nested state, e.g.:

const service = interpret(stoplight, ()=>{})
service.send('next') // service.machine.current === 'yellow'
service.send('next') // ERROR: state.enter is not a function

In the earlier part of the guide (and elsewhere) it states that you should use 'invoke' to assign a sub-machine to a state, but in the example a machine is assigned directly.

Was the intention to write something like this for the nested function?

const nested = (to, states) => invoke(createMachine(states), transition('done', to));

[jesperp]

Also got stuck for a while in the guide there. But yeah, I think the intention definitely was something like:

const nested = (to, states) => invoke(
  createMachine(states),
  transition('done', to),
);

[Zearin]

@matthewp Want to tag this Issue Docs?