How to change Background color of AgGrid Table dynamically?

Question

In Navbar Component, there are select tag with two options "light" and "dark" if i select dark option then I am setting this value in localStorage and localStorage value updating properly on selecting value from select tag. In Ag-grid component, I am getting this value in useState hook variable "isDarkTheme" from localStorage and use in jsx element. But Problem is that if i select dark option from Navbar Component then dark class not applying in AgGrid table, if i reload page then class is applying. I want apply dark class in AgGrid table without reload the page.

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
class MyGridComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDarkTheme: localStorage.getItem('themename') || 'light',
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price' }
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxster', price: 72000 }
      ]
    };
  }
  render() {
    const {isDarkTheme} = this.state;
    return (
      <div
        className={isDarkTheme === 'dark' ? 'ag-theme-alpine-dark' : 'ag-theme-alpine'}
        style={{
          height: '500px',
          width: '600px'
        }}
      >
        <AgGridReact
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}
        />
      </div>
    );
  }
}
export default MyGridComponent;```