React creating timetable

I am trying to create a time table for a project and i have 20 hour left can you please help me

each empty box needs to store data and while onclick the data must shown in description tab (on the right) and has to changeable how can i do that

i tries to usestate like this

const [data, setData] = useState([
    {
        hour: "08:00 - 09:00",
        id: 1,
        box: [
            {
                id: 1,
                title: "",
                description: ""
            },
            {
                id: 2,
                title: "",
                description: ""
            }, ...other boxes 
        ]    
    }, ...others hours

and my table jxs is

<table> 
                <tbody>               
                    <tr>
                        <th></th>
                        <th>Monday</th>
                        <th>Tuesday</th>
                        <th>Wednesday</th>
                        <th>Thursday</th>
                        <th>Friday</th>
                        <th>Saturday</th>
                        <th>Sunday</th>
                    </tr> 
                </tbody>                   
                {data.map((data, i) => {
                    return (
                        <tbody key={i}>
                            <tr key={i}>                                
                                <th key={i}>{data.hour}  {i}</th>
                                {data.box.map((box, idx) => {
                                    return <td key={idx}>{idx}</td>
                                })}                        
                            </tr>
                        </tbody>    
                    )
                })}                    
            </table>

and sql and some crud operations with django :((