It is a bad idea to have a scrollable component within another scrollable component - this approach can create visual issues, which you probably have noticed.

Having to set a height for a text sounds strange. It should be enough to set line height and position the text using flex.

Can we make it more general and use React.Node?

This function doesn't depend on props so maybe it is a good idea to move it outside the component?

Please check how loading state was implemented in add-users-list.react.js. In that implementation the size of loading / loaded state remains the same and we don't need to use absolute positioning.

Are spaces inside div added by a formatter?

Why do we use substring(2)?

Memoization doesn't work when there are multiple children - it is an array that gets generated in each render. There's no good solution to this problem, so it's better to not use memo at all to avoid confusion.

What's the purpose of this code? Maybe we can express the same intention in a simpler way?

Ah, that makes sense. Could you check how this issue was solved in other modals?

User readonly props

Sounds like a really risky solution - this might be an implementation detail that can change in any update. Looking at other similar solutions, e.g. react router uses custom prop path. Maybe we should also do something similar and use our own property instead of using built-in key?

Maybe we should also add a margin between the buttons and the list - to make things consistent with other places

Please remove additional spaces

We can simplify it a little more by storing components directly in index instead of array indices

We should prefer using classNames library for merging classes