How to build dynamic table in react from relational data

What is the best practice to render a table, which consist of unknown amount of business entities with arbitrary relations which aren't always navigable by object references (rather by id comparison)?

Here is an example case

There is arbitrary amount of users and systems with arbitrary amount of subsystems. It is assured, that user will always have Permission objects for all existing subsystems. We have both Systems and Users available in our container (notice how there's no object reference between Permission and Subsystem). Our objective is to render a matrix which shows users permission data for each subsystem. Let define the layout and requirements as following:

vertical array of user names and horizontal array of system names, where each system name cell consist of horizontal array of subsystem names. Now, each permission cell for user should align with the correct subsystem column in the matrix. The structure should be flexible and render correctly in borderline cases, where there are System without any subsystem or familiar unexpected but possible cases.

To make things clear, I forgot the hasPermission attribute from UML diagram

I'm not asking for complete solution, but at least a guideline how to build dynamic table from these premises.