React Icon Changes on Click

I cant for the life of me figure this out. I would like the React icons below to fill and stay filled on click and change back to outlined when another is clicked. Here is the code:

import { useState } from "react";
import { Link } from "react-router-dom";
import { AiOutlineHome } from "react-icons/ai";
import { AiFillHome } from "react-icons/ai";
import { BsCalendarCheck } from "react-icons/bs";
import { BsCalendarCheckFill } from "react-icons/bs";
import { BsCalendarPlusFill } from "react-icons/bs";
import { BsCalendarPlus } from "react-icons/bs";
import "./FooterNav.css";

const FooterNav = () => {
  return (
    <div className="footer-nav-container">
      <div className="footer-nav-icon">
        <Link to="/">
          <AiOutlineHome className="home-icon" />
          <p>Home</p>
        </Link>
      </div>
      <div className="footer-nav-icon">
        <Link to="/past">
          <BsCalendarCheck className="calendar-check-icon" />
          <p>Past</p>
        </Link>
      </div>
      <div className="footer-nav-icon">
        <Link to="/upcoming">
          <BsCalendarPlus className="calendar-plus-icon" />
          <p>Upcoming</p>
        </Link>
      </div>
    </div>
  );
};

export default FooterNav;

I would love some assistance with this. Thank you!

Solution

As mentioned in the comments,

You can make use of useLocation hook from react-router-dom. This give you current location details. Based on that you can decide which icon to load.

I haven't tested this but something like this would work

import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { AiOutlineHome } from "react-icons/ai";
import { AiFillHome } from "react-icons/ai";
import { BsCalendarCheck } from "react-icons/bs";
import { BsCalendarCheckFill } from "react-icons/bs";
import { BsCalendarPlusFill } from "react-icons/bs";
import { BsCalendarPlus } from "react-icons/bs";
import "./FooterNav.css";

const FooterNav = () => {
  const location = useLocation();
  console.log(location);

  return (
    <div className="footer-nav-container">
      <div className="footer-nav-icon">
        <Link to="/">
          {location.pathname === "/" ? <AiFillHome className="home-icon" /> : <AiOutlineHome className="home-icon" />}
          <p>Home</p>
        </Link>
      </div>
      <div className="footer-nav-icon">
        <Link to="/past">
          {location.pathname === "/past" ? <BsCalendarCheckFill className="calendar-check-icon" /> : <BsCalendarCheck className="calendar-check-icon" />}
          <p>Past</p>
        </Link>
      </div>
      <div className="footer-nav-icon">
        <Link to="/upcoming">
          {location.pathname === "/upcoming" ? <BsCalendarPlusFill className="calendar-plus-icon" /> : <BsCalendarPlus className="calendar-plus-icon" /> }
          <p>Upcoming</p>
        </Link>
      </div>
    </div>
  );
};

export default FooterNav;