React Socketio set online status for multiple users - node.js

Question

How can i update online status of multiple users in React.i want that when user A is online,user B and C can also see if user A is online.Here is what i have tried using react usestate but it isnt working
function MyOffers() {
const [loading, setLoading] = useState(true);
const [cookies] = useCookies();
const { enqueueSnackbar } = useSnackbar();
const navigate = useNavigate();
const [data, setData] = useState(false);
let { id } = useParams();
const [user, setUser] = useState({
username: null,
online: false,
});
////set online status
const socket = useContext(SocketContext);
useEffect(() => {
ifvisible.on('focus', function () {
socket.emit('online', user);
console.log(user);
});
ifvisible.on('blur', function () {
socket.emit('offline', user);
console.log('offline');
});
return () => {
ifvisible.off('focus');
ifvisible.off('blur');
};
}, [user]);
useEffect(() => {
socket.on('online', (data) => {
setUser((prevState) => ({
...prevState,
...data,
}));
console.log(user);
});
socket.on('offline', (data) => {
setUser((prevState) => ({
...prevState,
...data,
}));
});
}, [socket]);
useEffect(() => {
$.ajax({
type: 'POST',
url: '/get_offer',
headers: {
'X-XSRF-TOKEN': cookies['XSRF-TOKEN'],
'Authorization': `Bearer ${localStorage.getItem('auth')}`,
},
data: {
id: id,
},
success: function (data) {
switch (data.success) {
case true:
setData(data);
setLoading(false);
break;
case false:
break;
}
},
error: function () {},
statusCode: {
403: function () {
navigate('/');
},
},
});
}, []);
return (
<React.Fragment>
<Box flexGrow={1}>
{/*seller info*/}
<Grid item xs={12} sm={4}>
{loading ? (
<Skeleton
variant="rectangular"
animation="wave"
width={'100%'}
height={200}
sx={{ borderRadius: 2, marginTop: 1 }}
/>
) : (
<Item>
<Badge
color={
data.offer &&
data.offer[0].user.username === user.username &&
user.online === true
? 'success'
: 'warning'
}
variant="dot"
overlap="circular"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
>
<Avatar
alt="Remy Sharp"
src="/static/images/avatar/1.jpg"
sx={{ width: 56, height: 56 }}
/>
</Badge>
<Typography variant={'h5'}>
{data.offer ? data.offer[0].user.username : ''}
</Typography>
<Typography paragraph>
<Rating name="read-only" value={5} readOnly />
<Typography variant={'subtitle1'}>[5]</Typography>
</Typography>
<CardActions sx={{ display: 'flex', justifyContent: 'space-evenly' }}>
<IconButton aria-label="add to favorites">
<LockClockOutlinedIcon />
</IconButton>
<IconButton aria-label="share">
<LockClockOutlinedIcon />
</IconButton>
</CardActions>
</Item>
)}
</Grid>
</Grid>
</Box>
</React.Fragment>
);
}
export default MyOffers;
i want such when the owner of the offer is online,to update the online status badge of the user viewing the offer.Here is my server code
/**
* Listen for incoming socket connections
*/
Ws.io.on('connection', (socket) => {
socket.on('online', (data) => {
data.online = true;
socket.broadcast.emit('online', data);
});
socket.on('offline', (data) => {
data.online = false;
socket.broadcast.emit('offline', data);
});
});