use React Hooks to change the elements class Name and siblings

import {
  useLocation
} from "react-router-dom";

const SideBar = () =>{
  const [activeClass, setClass] = useState('');
  let { pathname } = useLocation();

  return (
    <div className="sidebar">
      <ul>
        <li> <Link className={pathname === '/' ? 'active' : ''} to="/"> Home </Link> </li>
        <li> <Link to="/about" className={pathname === '/about' ? 'active' : ''}> About </Link> </li>
        <li> <Link to="/form" className={pathname === '/form' ? 'active' : ''}> Form </Link> </li>
      </ul>
    </div>
  )
}

import { NavLink } from 'react-router-dom';

const SideBar = () => {
      const isActive = path => (match, location) => {
        if (!match) {
          return false;
        }
        return match.url === path;
      };

      return (
        <div className="sidebar">
          <ul>
            <li> <NavLink isActive={isActive('/')} activeClassName="active" to="/"> Home </NavLink> </li>
            <li> <NavLink to="/about" isActive={isActive('/about')} activeClassName="active"> About </NavLink> </li>
            <li> <NavLink to="/form" isActive={isActive('/form')} activeClassName="active" > Form </NavLink> </li>
          </ul>
        </div>
      )
    }