how can i create nested state reusable

[Rot4tion]

I have been searching for a solution for more than a day and still have not found the best way to combine multiple machines into one machine.

Here is the original code that works as expected:

export const testMachine = setup({
  types: {
    events: {} as { type: 'physicsTick' },
    context: {} as { count: number }
  },
  actions: {
    increment: assign(({ context }) => {
      return { count: context.count + 1 }
    })
  }
}).createMachine({
  id: 'Test',
  initial: 'Green',
  context: { count: 0 },
  states: {
    Green: {
      on: {
        physicsTick: {
          actions: ['increment'],
          target: 'Red'
        }
      }
    },
    Red: {
      on: {
        physicsTick: {
          actions: ['increment'],
          target: 'Other'
        }
      }
    },
    Other: {
      id: 'Order',
      initial: 'Yellow',
      states: {
        Yellow: {
          on: {
            physicsTick: {
              actions: ['increment'],
              target: 'Blue'
            }
          }
        },
        Blue: {
          on: {
            physicsTick: {
              actions: ['increment'],
              target: 'Done'
            }
          }
        },
        Done: { type: 'final' }
      },
      onDone: {
        target: 'Green'
      }
    }
  }
})
// use
const actor = createActor(testMachine)
actor.subscribe((state) => {
  console.log('state.value', state.value)
  console.log('state.context', state.context)
})
actor.start()

for (let i = 0; i < 4; i++) {
  actor.send({ type: 'physicsTick' })
}
// output
// state.value Green
// state.context { count: 0 }     
// state.value Red
// state.context { count: 1 }     
// state.value { Other: 'Yellow' }
// state.context { count: 2 }     
// state.value { Other: 'Blue' }  
// state.context { count: 3 }     
// state.value Green
// state.context { count: 4 }     
// state.value Red
// state.context { count: 5 } 

This is how I try to separate the code for maintainability and reusability.

import { assign, sendTo, setup } from 'xstate'
export const otherMachine = setup({
  types: {
    events: {} as { type: 'physicsTick' },
    input: {} as { count: number },
    context: {} as { count: number }
  },
  actions: {
    increment: assign(({ context }) => {
      return { count: context.count + 1 }
    })
  }
}).createMachine({
  id: 'Order',
  initial: 'Yellow',
  context: ({ input }) => input,
  states: {
    Yellow: {
      on: {
        physicsTick: {
          actions: ['increment'],
          target: 'Blue'
        }
      }
    },
    Blue: {
      on: {
        physicsTick: {
          actions: ['increment'],
          target: 'Done'
        }
      }
    },
    Done: { type: 'final' }
  }
})

export const testMachine = setup({
  types: {
    events: {} as { type: 'physicsTick' },
    context: {} as { count: number }
  },
  actors: { other: otherMachine },
  actions: {
    increment: assign(({ context }) => {
      return { count: context.count + 1 }
    })
  }
}).createMachine({
  id: 'Test',
  initial: 'Green',
  context: { count: 0 },
  states: {
    Green: {
      on: {
        physicsTick: {
          actions: ['increment'],
          target: 'Red'
        }
      }
    },
    Red: {
      on: {
        physicsTick: {
          actions: ['increment'],
          target: 'Other'
        }
      }
    },
    Other: {
      invoke: {
        input: ({ context }) => context,
        id: 'otherActor',
        src: 'other',
        onDone: {
          target: 'Green'
        }
      },
      on: {
        physicsTick: {
          actions: [sendTo('otherActor', { type: 'physicsTick' })]
        }
      }
    }
  }
})

// unexpected output
// state.value Green
// state.context { count: 0 }
// state.value Red
// state.context { count: 1 }
// state.value Other
// state.context { count: 2 }
// state.value Other
// state.context { count: 2 }
// state.value Other
// state.context { count: 2 }
// state.value Green
// state.context { count: 2 }

I am looking for the best way to structure and break down code for reuse across different machines.
I just started using xstate few days ago please help T_T