Display data on HTML Table to look like graph : ReactJS

Question

I have a requirement to show the data on the graphical structure based on below image

This is what i have tried

Since i have expand and collapse on y axis, thought of showing the data on HTML Table as rows and then expand collapse would be possible by hiding and showing the children rows.

My data configuration.

{
strings: [
    { name: 'A' },
    { name: 'B' },
    { name: 'C' },
    { name: 'D' },
    ...
    ...
    ...
    ...
    { name: 'X' },
    { name: 'Y' },
    { name: 'Z' },
],
timeZones: [
    { time: 12.00, string: "A" },
    { time: 12.15, string: 'B' },
    { time: 12.30, string: "C" },
    { time: 12.45, string: "D" },
    ...
    ...
    ...
    ...
    { time: 11.30, string: "x" },
    { time: 11.45, string: "y" },
    { time: 12.00, string: "z" },
]

}

From React

strings.map((range, index) => {
return (
    <TableCell as="th">{range.string}</TableCell>
)
})



timeZones.map((range1, index) => {
return (
    <TableBody>
        <TableRow>
            <TableCell>{range1.time}</TableCell>
        </TableRow>
    </TableBody>
)
})

But Still i'm unable to figure it out, if this is the right approch. Since i'm unable to put exact data inside the data to look like a graph

I'm looking for an approch for my issue, if i have to continue on this HTML table or to achieve the same thing or the same thing can be achieved using React ChartJS

NOTE: The expansion and collapse on the yAxis is optional. this is to reduce the length of the data going into y axis