useInterpret logs warning about uninitialized service when service is passed to child component

[anonymouscatcher]

Description
Trying to use a machine using useInterpret but cannot access to machine in children and it throws error + a warning Attempted to read state from uninitialized service.

Expected Result

Actual Result

Reproduction
I think this is fixed in useMachine #1132 (comment)

Additional context

 "xstate": "^4.18.0",
  "@xstate/react": "^1.3.2",

[anonymouscatcher]

Example:

  const selectService = useInterpret(
    selectMachine(props.data, false)
  );

 return (
    <>
      <Header
        selectService={selectService}
      />
      <TrackList
        itemProps={{ selectService }}
        {...props}
      />
    </>
  );

[anonymouscatcher]

The weird thing about this issue is, Only Header has issue with it, TrackList component is working fine but at the end they use same component so what I guess is, it's has something todo with scheduling or something since I tried something stupid I rendered the Header with a setTimout(0) (with wrapping it with <Delay/> component) delay and then it worked correctly.

[stevenmusumeche]

I'm having the same issue.

[davidkpiano]

This should no longer be an issue in the latest @xstate/react version, but please re-open if it is.