How do i set active state for a nav link with Tailwind css using React Router Dom for routing

I am a new front-end developer working on a project using Tailwind CSS and react-router, I need to set an active state for my nav links but nothing works. I found one other question with two answers but they aren't helpful (on the tailwind side of things).

The navigation works perfectly, but I want to be able to let the user know the page they are on by styling those page links on the navbar with tailwind CSS.

this is what the navbar block of code looks like. I could really use your help please, thank you.

    function Navbar() {
  return (
    <nav className='flex justify-between items-center py-6 px-32 text-my-green bg-my-white '>
        <div>
            <NavLink to="/"><img src={logo} alt="Company's branding" /></NavLink>
        </div>
        <ul className='flex text-base font-medium font-Inter'>
            <NavLink to="/meat"><li className="mr-10 active:text-my-orange hover:text-my-lime">Meat</li></NavLink>
            <NavLink to="/vegan"><li className='mr-10'>Vegan</li></NavLink>
            <NavLink to="/fast"><li className='mr-10'>Fast</li></NavLink>
            <NavLink to="/gluten-free"><li className='mr-10'>Gluten Free</li></NavLink>
            <NavLink to="/diary-free"><li className='mr-10'>Diary Free</li></NavLink>
            <NavLink to="/healthy"><li>Healthy</li></NavLink>
        </ul>
        <div>
            <NavLink to="/random"><button className='py-3 px-6 font-Inter text-base text-my-lightgreen bg-my-orange rounded-full'>Generate Random</button></NavLink>
        </div>
    </nav>
  )
}