First Open/Close works fine, subsquent off canvas menu disappears

[gtwilliams03]

I am having a strange issue. Using this component with a React-Redux stack where the isOpen variable is set in the redux state. It works fine for the first open-close cycle, but every time after that when the off-campus menu opens, it shows for a moment and the disappears. If I manually edit the "visibility:hidden" style on the off-campus root element, the menu shows up.

First open:

Second open:

[gtwilliams03]

<OffCanvas isOpen={showOffCanvasMenu}
    height='100vh' position='right'
    onClose={this.handleOffCanvasMenuOnClose}
    mainContainerSelector={`.${coreLayoutCss.appLayout}`}
    labelledby={`main-menu-navbar-toggle-button`}>
    <OffCanvasMenu onClose={this.toggleOffCanvasMenu menuItems={menuItems} />
</OffCanvas>

[gtwilliams03]

Fixed it by forcing the CSS to visibility: visible' when myshowOffCanvasMenuistrue`.

                <OffCanvas isOpen={showOffCanvasMenu}
                    height='100vh' position='right'
                    onClose={this.handleOffCanvasMenuOnClose}
                    mainContainerSelector={`.${coreLayoutCss.appLayout}`}
                    className={offCanvasMenuCss.content + (showOffCanvasMenu ? ' ' + offCanvasMenuCss.isVisible : '')}
                    labelledby='main-menu-navbar-toggle-button'>
                    <OffCanvasMenu onClose={this.toggleOffCanvasMenu}
                        menuItems={menuItems} />
                </OffCanvas>

With this css in an imported file:

.content {
    &.isVisible {
        visibility: visible !important;
    }
}

I lost the animation between open/closed states, but it's working

[gtwilliams03]

And returned the animation by overriding the styles on the content div:

.content {
    transition-property: transform, visibility !important;
    transition-duration: 0.25s;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    &.isVisible {
        visibility: visible !important;
        transform: translateX(0) !important;
    }
}

It's a hack - but it's working.