What is the best way to nest ReactJS components based on the actions needed in a Calendar

I have a question about the best way to nest components in ReactJS.
My current nesting looks like the code bellow:

- MainComponent <- class component
   - CalendarHeader <- functional component(this contains the chevrons, month and year functional components)
   - 7 inactive buttons( L, M, M, J, V, S, D) <- functional components(derived from CalendarButton)
   - 35 to 42 CalendarButtons <- functional component(these are created based on a array 
                                                      days = [29, 30, 31, 1, 2, ... 29, 30, 31, 1, 2])

When a user clicks/toggles any CalendarButton, I want to show him another component(I will call this ActionsComponent).
The ActionsComponent must have access to the Date designated for each CalendarButton.
The ActionsComponent should show the user if the date selected is occupied or not, send a request for reservations etc.

I tried to convert the buttons functional component into class component, but this way they do not seem to render correctly. When I change the month they will not change the numbers inside.

See the image bellow:

Questions:
What is the best way :

1. to create a separate component with 7 Buttons and an ActionComponent?
2. to keep all the components as siblings, so a button when a buttons is pressed the ActionComponent is inserted on the next row?

Thank you!