It looks like the style of this element is specific to thread-menu so it might be a better idea to keep thread-menu.css with only separator class

Readonly

Why do we need to use an array here? I think that children?: React.Node might work fine. In that case, we can use React.Children.count to get a number of children

I've never had to do something like this, so I'm not sure what the best pattern is. This approach strikes me as imperative rather than declarative, and React usually tries to be declarative. But I guess maybe there's no declarative way to do this in React (add a listener to document).

It looks like you're handling the lifecycle well. If you have any resources you can link that talk about best practices for this sort of thing in React, that would be great!

React.Children.count is a function that takes a parameter