how to make sidebar toggle works on react.js

Question

import React, { Component } from 'react';
import './SideBar.css'



class SideBar extends Component {
    state = {
    }
    

    render() { 
    
        var toggleOptions = false
        var sideBar = document.querySelector('#sideBar');
        
        const toggleOptionsOnClick = (e) => {
            e.preventDefault()
            switch(toggleOptions) {
                case false :
                    toggleOptions = true
                    sideBar.setAttribute('id', 'openedSideBar')
                case true :
                    toggleOptions = false
                    sideBar.setAttribute('id', 'sideBar')
                default :
                    

            }
        }
        console.log(sideBar);
    
    

        return (
            <nav id="sideBar">

                <div id='container' 
                onClick={this.toggleOptionsOnClick} 
                style={{cursor:'pointer'}}
                >
                    <div className='burger'></div>
                    <div className='burger'></div>
                    <div className='burger'></div>
                </div>



                


            </nav>
        );
    }
}

export default SideBar;

This is my sidebar react component and everything is fine, no errors no bugs ... but when i click the hamburger options div it don't do the method that change the sidebar id attribute. Anyone knows why ? Note : the console.log command returns null