[@xstate/react] Add Context Consumer

[RemyMachado]

I'd like createActorContext to expose a .Consumer similar to React.createContext.

It would be used like this:

const MachineContext = createActorContext(machine);

export const MyComponent = () => {
    return (
        <MachineContext.Provider>
            <MachineContext.Consumer>
                {context => (
                    // ... use context here
                )}
            </MachineContext.Consumer>
        </MachineContext.Provider>
    )
}

React.js documentation on the subject: https://react.dev/reference/react/createContext#consumer

I like to consume the context like this because I don't have to create an intermediary component just to be able to use the hook.

For instance, without the Consumer, I need to do:

const MachineContext = createActorContext(machine);

export const MyComponent = () => {
    return (
        <MachineContext.Provider>
            <Inner />
        </MachineContext.Provider>
    );
};

const Inner = () => {
    const context = React.useContext(MachineContext);
    return (
        // ... use context here
    );
};

This forces me to split the component unnecessarily just to satisfy the hook rules. For simple components or low-level consumers, using a .Consumer would reduce boilerplate.