REACT, скрытый элемент перекрывает родительский элемент при отображении

Question

У меня есть компонент реакции A, который содержит больше компонентов B, созданных в компоненте A на основе ответа сервера с использованием функции карты. Каждый компонент B имеет компонент календаря, который нужно показать / скрыть. Когда календарный компонент показывает, он перекрывает родительский компонент. Если я добавляю компонент B необработанным, он работает отлично, поэтому я не думаю, что css не так. Когда я проверяю визуализированный HTML, прикрепленный календарь находится в нужном месте в DOM. Что я не так сделал?

Мой компонент A:

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 компонент

  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();
      }
  }

Компонент календаря

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