When I implemented it with single number, there was a race condition when I was switching between menus - when trying to open one if the other is opened. I happened, that the second one was opened a bit quicker that the first was closed, and the state became invalid. The solution with array of opened menus prevents the problems here.
An alternative approach would be to block opening a second menu if one is opened, but I think the current (without blocking opening menus) is more user-friendly (as user don't have to close one menu to open another).
I'm curious @palys-swm what do you think is the best approach here.

I'm not sure why this race condition occurred. But it is possible that onMenuChange can be implemented in a way that avoids this issue:
So first of all, we would have a state const [openMenu, setOpenMenu] = React.useState<?number>(null)
When we open a menu, we can just set it to the new menu id.
Then, when we close a menu, we should set it to null only when user.id matches. So in other words, closing a menu should set a state only when this menu was currently opened.
Could that solve the issue?

This shouldn't happen, but if somebody's username is the empty string, a[0].localCompare could end up with a fatal error (dereferencing localCompare on undefined). Probably not worth worrying about (the username regex should prevent the empty string from working)

Yes, good catch. The users are currently displayed sorted by ID by default. I didn't notice it because all users I had in database were registered in alphabetical order accidentally.