REACT, hiden element overlays parent element when displayed - reactjs

Question

I have a react component A, that contains more B components generated in A component based on server response using map function. Every B component has a calendar component that needs to show/hide. When calendar component shows it overlays the parent component.
If I put a B component raw, it works perfectly, so I don't think that css is wrong.
When I exam the rendered HTML, the appened calendar is at right place in DOM.
Whad did I wrong.
My A component:
class OffersDesktop extends OffersBase<WithStyles<typeof styles>>
{
render()
{
const css = this.props.classes;
const offers:BookingOffersResponse[] = this.state.offers;
const selectionPalens = offers.map
(
(offer: BookingOffersResponse, index: number) =>
{
return <SelectedPanel offer={offer} key={index + 1} />
}
);
const canContinue: boolean = this.store.state.selectedOffer.OfferID !== '';
const continueButon: JSX.Element = <BlueButton enable={!canContinue} text="Continue" onClick={this.continue}/>;
const Body = () =>
<StackPanel className={css.root} orientation="vertical" centerHorizontally centerVertically>
<Header />
<StackPanel className={css.container} orientation="vertical">
<StackPanel {...dockLeft}>
<HorizontalLinearStepper step={this.props.step} />
</StackPanel>
<StackPanel {...dockLeft} centerVertically className={css.titleContainer}>
<LocalOffer fontSize="large" className={css.icon} />
<span className={css.title}>Offers</span>
</StackPanel>
<StackPanel orientation="horizontal" centerHorizontally>
<StackPanel orientation="vertical" {...dockLeft}>
<StackPanel centerHorizontally centerVertically orientation="vertical">
<SelectedPanel offer={{} as any} key={0} />
<CircleLoader css={css.spinner}
sizeUnit={'px'}
size={100}
color={'#123abc'}
loading={this.state.isDataLoaded}
/>
</StackPanel>
{!this.state.isDataLoaded && selectionPalens}
<StackPanel centerHorizontally centerVertically>
<YearRoundPanel onClick={ this.yearRoundHandler } />
</StackPanel>
</StackPanel>
<StackPanel orientation="vertical" className={css.rightContainer}>
<StackPanel className={css.continueContainer} orientation="vertical" centerHorizontally centerVertically>
<StackPanel className={css.continueButton}>{continueButon}</StackPanel>
<Typography className={css.continueContainerText} variant="subtitle1">Book now with $25 deposit</Typography>
</StackPanel>
<SearchParameters searchParameters={this.state.appState.searchParameters}/>
</StackPanel>
</StackPanel>
</StackPanel>
<StackPanel className={css.footer} {...dockBottom} centerHorizontally><Footer /></StackPanel>
</StackPanel>
return Body();
}
B component
class SelectedPanel extends Connected<typeof React.Component, IProps & WithStyles<typeof styles>, IState, AppStore>(React.Component)
{
constructor(props: IProps & WithStyles<typeof styles>)
{
super(props);
this.state =
{
showCalendar: false,
appState: this.store.state
}
}
showCalnedarHandler = (event: React.MouseEvent<HTMLElement, MouseEvent>) : void =>
{
event.preventDefault();
this.setState
({
...this.state,
showCalendar: !this.state.showCalendar
})
}
render()
{
const css = this.props.classes;
const offer = this.props.offer;
const Body = () =>
<StackPanel className={css.root} centerHorizontally centerVertically orientation="vertical">
<StackPanel className={css.container} orientation="horizontal">
<StackPanel className={css.left} orientation="vertical">
<Typography className={css.typeText} variant="h6" gutterBottom>{this.state.appState.bookingTypeName} Dockage</Typography>
<Typography variant="h6" gutterBottom>
<span className={css.priceText}>$100.00</span><span className={css.priceTextExcluding}> per night excluding texes and add-ons</span>
</Typography>
<Typography className={css.offText} variant="h6">50% of (was $200)</Typography>
<StackPanel centerHorizontally centerVertically orientation="vertical" className={css.buttonContainer}>
<StackPanel {...dockTop} centerHorizontally centerVertically className={css.button} >Arrivals on 04/19/19 have a 3 night minimum stay</StackPanel>
<StackPanel {...dockBottom} centerHorizontally centerVertically className={css.button}>Space is aviable but the requestet shore power is not awiable</StackPanel>
</StackPanel>
<Typography onClick={event => this.showCalnedarHandler(event)} className={css.showCalendarText} variant="subtitle1">
Show pricing calendar
<KeyboardArrowDown className={css.selectionArrow}/>
</Typography>
</StackPanel>
<StackPanel className={css.right} orientation="vertical" centerHorizontally>
<StackPanel {...dockTop} centerHorizontally centerVertically className={css.whiteButton}>
<InformationButton text="Only 2 spaces left"/>
</StackPanel>
<StackPanel {...dockBottom} centerHorizontally centerVertically className={css.selectedButton}>
<SelectedButton text="Selected" />
</StackPanel>
</StackPanel>
</StackPanel>
{
this.state.showCalendar &&
<StackPanel className={css.calendarPanelContainer} {...dockBottom}>
<CalendarPanel searchParameters={this.state.appState.searchParameters}/>
</StackPanel>
}
</StackPanel>
return Body();
}
}
Calendar component
class CalendaPranel extends React.Component<IProps & WithStyles<typeof styles>, IState>
{
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel className={css.root} centerVertically orientation="vertical">
<StackPanel className={css.calendarContainer} centerHorizontally centerVertically>
<Calendar searchParameters={this.props.searchParameters}/>
</StackPanel>
<StackPanel className={css.legend} centerVertically orientation="horizontal">
<span className={css.unavailable}></span>Unavailable
<span className={css.available}></span>Available
<span className={css.selectedStartDay}></span>Selected Start Day
<span className={css.dateRange}></span>Date Range
</StackPanel>
<Typography className={css.legendText} variant="subtitle1">Above is the price for each night of dockage excluding taxes and add-ons</Typography>
</StackPanel>
return Body();
}
}
thnx