What is the convenient way to subscribe to app wide "presence.online" websockets channel's event in multiple react components

I need to show an indicator(green circle) for online users in the entire inertia app (with multiple pages). I have a PostsPage with a list of Post/Comment components that each have a nested UserAvatar component. The online indicator need to show on the UserAvatar component.

What is the recommended way to implement this on the frontend since Inertia state is immutable (I can't just add/update online status attribute on the user's object)? On the frontend, in which components should I be subscribing to here, joining and leaving events? And where should I be joining the "presence.online" channel?

NB: I'm using Inertia + React + laravel-websockets + laravel-echo.

Thanks