Why doesn't it rerender after I send a cross-component action?

[MatherLyn]

First, I want to express my appreciate on the use of state design pattern in xstate.
Below is my dilemma:

I use a button to control the state of a component.
And I create two machines, one is for the button, the other is for the component.
In the button's machine, I define the onclick event:

And this is how the action is defined:

And this is the button's tsx:

In the component's machine, I define the toggle event:

actions:

tsx:

When I click the button, I found the style in the component doesn't change. I added breakpoint and found the action was successfully sent, but the state in the component's machine did not update, which means the event was not be emitted.

Thanks for reading, and please give me a hand.

[davidkpiano]

Thanks for the screenshots, but a CodeSandbox (React template) is necessary in order to debug this. Can you please make a minimal reproduction?

[MatherLyn]

Thanks for replying. I found the problem that I did not share the same instance of the interpreter between these two component. After I learned the actor model, I spawn the machines and mount them on a root machine and solve this problem~