Full calendar gets rendered in scrambled state inside react-bootstrap

[Mahesha999]

I have following component on my page:

events = [{ title: "today's event", date: new Date() }];
<FullCalendar
                    height="auto"
                    contentHeight="auto"
                    defaultView="dayGridMonth"
                    plugins={[dayGridPlugin]}
                    events={this.events}
                />

When it is inside react-bootstrap accordion, it gets rendered in some scrambled state:

If I click previous / next button, then it gets correctly rendered. Also if I zoom in / zoom out, then also it gets rendered correctly.

I am able to imitate this in this codesandbox:

Accordion 1 is initially rendered in collapsed state. If you expand it, you will get exact same render as my first screenshot. Also note that if you zoom in or out in codesandbox webpage or click next or previous webpage, it renders correctly!

Why is this so?

PS:

I am using

"bootstrap": "^4.6.0",
"@fullcalendar/daygrid": "^5.11.3",
"@fullcalendar/react": "^5.11.2",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",

[Dylan Ferris]

You need to call updateSize to update the size of the calendar after changing the dimensions how it was initialised. It happens automatically on window resize (eg. zooming).