Тернар для боковой панели в реакции

У меня есть компонент боковой панели с реквизитом sidebarOpen, то есть: <SidebarWrapper sidebarOpen = {this.props.sidebarOpen}>

У меня также есть кнопка, где onClick переключает sidebarOpen на истину и ложь.

У меня также есть прослушиватель событий, в котором на мобильном устройстве установите для sideBarOpen значение false. Это функция:

setSidebar = () => {
 const isMobile = (typeof window !== 'undefined') && (window.innerWidth < 500)

 if (isMobile) {
   this.props.openSidebar(false)
 } else {
   this.props.openSidebar(true)
 }
}

Что я пытаюсь сделать, так это то, что если вы нажмете кнопку на мобильном устройстве и измените размер экрана, боковая панель должна оставаться открытой без мерцания.

Видео здесь

Вот полный компонент:

import React from 'react'

import { bindActionCreators } from 'redux'
import { toggleDarkTheme, openSidebar } from '../../actions/layout'
import { connect } from 'react-redux'
import {SidebarWrapper} from './styles'


const mapDispatchToProps = dispatch => {
  return {
    toggleDarkTheme: bindActionCreators(toggleDarkTheme, dispatch),
    openSidebar: bindActionCreators(openSidebar, dispatch)
  }
}

const mapStateToProps = state => ({ sidebarOpen: state.layout.sidebarOpen });

export default connect(mapStateToProps, mapDispatchToProps)(class Sidebar extends React.Component {

  setSidebar = () => {
    const isMobile = (typeof window !== 'undefined') && (window.innerWidth < 500)

    if (isMobile) {
      this.props.openSidebar(false)
    } else {
      this.props.openSidebar(true)
    }
  }

  componentDidMount() {
    window.addEventListener("resize", this.setSidebar);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.setSidebar);
  }

  render() {
    return (
      <SidebarWrapper sidebarOpen = {this.props.sidebarOpen}>
          <button onClick = {this.props.toggleDarkTheme}>Darkness</button>
      </SidebarWrapper>
    )
  }
})

и стили:

import styled from 'styled-components'
import breakpoint from 'styled-components-breakpoint'

export const SidebarWrapper = styled.div`
  display: ${props => props.sidebarOpen ? 'flex' : 'none'};
  flex-direction: column;

`