I am trying to get the ACTIVE pseudo class to work for the li element where the icon images are imported first. But the class only actives itself when clicked but does not stays active. Also, I want it to change the active state when clicked on a different icon of the navigation bar.

Topnavbar.js

import React from 'react'
import './topNavStyle.css'
import {Link} from 'react-scroll'
import Home from '../../images/home.png'
import About from '../../images/about.png'
import Education from '../../images/education.png'
import Technology from '../../images/technology.png'
import HireMe from '../../images/hire.png'

const Topnavbar = () => {
    return(
        <>
        <nav className='navStyle'>
            <ul className='sort'>
                <li>
                    <Link to='bannerStyle' spy={true} smooth={true} duration={500}><b>THENGAL</b></Link>
                </li>
                <div className='rightNav'>
                    <li className=''>
                        <Link to='bannerStyle' spy={true} smooth={true} duration={500}>Home</Link>
                    </li>
                    <li>
                        <Link to='about' spy={true} smooth={true} duration={500}>About</Link>
                    </li>
                    <li>
                        <Link to='education' spy={true} smooth={true} duration={500}>Education</Link>
                    </li>
                    <li>
                        <Link to='technology' spy={true} smooth={true} duration={500}>Technologies</Link>
                    </li>
                    <li>
                        <Link to='contact' spy={true} smooth={true} duration={500}>Hire Me</Link>
                    </li>
                </div>
            </ul>
        </nav>
        <nav id='navStyle'>
            <ul>
                <li>
                    <Link to='bannerStyle' spy={true} smooth={true} duration={500}><img src={Home} alt='Home' /></Link>
                </li>
                <li>
                    <Link to='about' spy={true} smooth={true} duration={500}><img src={About} alt='Home' /></Link>
                </li>
                <li>
                    <Link to='education' spy={true} smooth={true} duration={500}><img src={Education} alt='Home' /></Link>
                </li>
                <li>
                    <Link to='technology' spy={true} smooth={true} duration={500}><img src={Technology} alt='Home' /></Link>
                </li>
                <li>
                    <Link to='contact' spy={true} smooth={true} duration={500}><img src={HireMe} alt='Home' /></Link>
                </li>
            </ul>
        </nav>
        </>
    )
}

export default Topnavbar

topNavStyle.css

@media only screen and (min-device-width: 200px) and (max-device-width: 877px) {
    .navStyle {
        display: none;
    }

    #navStyle {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background-color: #301E67;
        height: 75px;
        width: 100%;
        gap: 5%;
        position: fixed;
        z-index: 1;
    }

    #navStyle > ul {
        padding: 0;
    }

    #navStyle > ul > li {
        padding: 0;
    }

    #navStyle img {
        width: 40px;
    }

    #navStyle ul li:active, li:visited {
        padding: 0.05rem;
        background-color: white;
    }
}