Fix `useRemoteParticipant` re-rendering on participant events

[mpnri]

Hi, This PR fixes the problem of not re-rendering in useRemoteParticipant for triggered participant events.

Currently, this hook uses useObservableState, which itself uses a useState to execute a re-render after each emit value in the observable. But we know that the reference of participant object does not change when new events are fired, and thus re-rendering does not occur. So, to solve this problem, we need to put the participant in a wrapper object to use useState.

P.S: Maybe a cleaner coding to solve this problem: (although it requires the 'map' operator from rxjs)

const observable = React.useMemo(
  () =>
    connectedParticipantObserver(room, identity, { additionalEvents: updateOnlyOn }).pipe(
      map((p) => ({ p })),
    ),
  [room, identity, updateOnlyOn],
);
const { p: participant } = useObservableState(observable, {
  p: room.getParticipantByIdentity(identity) as RemoteParticipant | undefined,
});

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: ae6bd2c5ac34c2e92a4183b7998570a917168a63

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

| Name | Type | | --------------------------------- | ----- | | @livekit/components-react | Patch | | @livekit/component-example-next | Patch | | @livekit/components-js-docs | Patch | | @livekit/component-docs-storybook | Patch | | @livekit/components-docs-gen | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[lukasIO]

Looks good, thanks!