Highlight (Change) active nav link Color in ReactJS

How to highlight a route when selected in reactjs css

Whenever I select an option from the sidebar menu, the corresponding selected option background should change

so how to change the color of the selected option in sidebar menu using reactjs or css?

import React, { Component } from "react";
import { Link, NavLink } from "react-router-dom";
import ScCommonServices from "../../../services/common_services";
//import { NavLink } from "react-bootstrap";
import "./sidebar.scss";
import $ from "jquery";

class Sidebar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      links: [],
    };
  }
  componentDidMount() {
    ScCommonServices.access_privileges().then((access) => {
      this.setState({
        links: access,
      });
    });
  }
  close = () => {
    $("#sidenav").css({ display: "none", transition: "0.5s" });
    $(".main-content").css({ marginLeft: "0", transition: "0.2s" });
    $("#side-backdrop").css({ display: "none" });
  };
  render() {
    return (
      <div>
        <aside className="sidenav animated" id="sidenav">
          <div className="img-box">
            {/* <img className="img-fluid cargil" src="../images/orglogo.png" alt="test" /> */}
            <i
              className="fas fa-times"
              aria-hidden="true"
              onClick={this.close}
            ></i>
          </div>

          <div>
            <div className="panel-group">
              {this.state.links.length > 0
                ? this.state.links.map((item, i) => {
                    return (
                      <div>
                        {item.childrens ? (
                          <div
                            className="side-head"
                            data-toggle="collapse"
                            href={"#c" + item.privilege_id}
                            aria-expanded="false"
                          >
                            <i class={item.icon}></i>
                            <span className="drp-menu">
                              <h4>{item.page_name}</h4>
                            </span>
                          </div>
                        ) : (
                          <ul className="nav">
                            <NavLink
                              to={"/schome" + item.route_link}
                              activeClassName="active"
                            >
                              {" "}
                              <li>
                                <i className={item.icon}></i>
                                <span className="collapsed ">
                                  {item.page_name}
                                </span>
                              </li>
                            </NavLink>
                          </ul>
                        )}

                        {item.childrens
                          ? this.state.links[i].childrens.map((childItem) => {
                              return (
                                <div
                                  className="collapse in"
                                  id={"c" + item.privilege_id}
                                >
                                  <ul className="nav drp-nav">
                                    <NavLink
                                      to={"/schome" + childItem.route_link}
                                      
                                      activeClassName="active"
                                    >
                                      {" "}
                                      <li>
                                        <i className={childItem.icon}></i>
                                        <span className="collapsed ">
                                          {childItem.page_name}
                                        </span>
                                      </li>
                                    </NavLink>
                                  </ul>
                                </div>
                              );
                            })
                          : ""}
                      </div>
                    );
                  })
                : ""}
              <ul className="nav">
                
              </ul> 
            </div>
          </div>
        </aside>
        <div id="side-backdrop"></div>
      </div>
    );
  }
}
export default Sidebar;