React - conditional rendering for mobile and desktop breakpoints

Question

class CoworkingMainTop extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMobile: false,
    };
  }

  componentDidMount() {
    if (window.innerWidth < 767) {
      this.setState({ isMobile: true });
    }
  }
  
  render() { 
    return (
      <div>
        {this.state.isMobile ? (
          <>
            < CoworkingMainTopMobile />
            < CoworkingMainCities />
          </>
        ) : (
          < CoworkingMainTopDesktop />
        )}
      </div> 
    );
  }
}

export default CoworkingMainTop;