How to make a class schedule?

Question

React

I have such a problem that I don’t understand how to make the received data in the form of json, I would put them in the table at the right time and at the same time the column of which room the start and end time belongs to. So that this rowspan time will merge cells by time. The question simply arose of how to move it all into a table so that all cells match and merge in parallel at a certain time.
The data is taken from the database in the form of an ORM from PHP, where it is fixed in which room the lesson will be, how long to go and, in theory, what will go. For each day, so far I have not done this, because I need to understand how to fix the lesson in the table. In the future, there can be several or one room, it all depends on the user, how many rooms he chooses. Well, respectively, group and individual lessons are fixed in the schedule, again, which came from the database.
I need the schedule to be not horizontal, but vertical, because in the scheduled lesson, the schedule should record which direction, who the teacher is, the number of participants and the names of the participants themselves.
Why I chose rowspan because it seemed to me that it was necessary, in principle, I didn’t create such a schedule, but looked approximately how it should be in structure, if there are other solutions that allow such an option to be done, then I can consider it.
Here is my implementation https://codepen.io/rusline/pen/NyBYVY?editors=0010