How to add .active class to active menu item?

Question

JavaScript

How to add the .active class to a menu item on click?
by clicking the menu, the redirect page will simply scroll no
without going through .map()

import React from 'react'

export default function Nav() {
    return (
        <ul className="nav">
            <li className="nav-item">
                <a href="#">Item</a>
            </li>
            <li className="nav-item">
                <a href="#">Item 1</a>
            </li>
            <li className="nav-item">
                <a href="#">Item 2</a>
            </li>
            <li className="nav-item">
                <a href="#">Item 3</a>
            </li>
            <li className="nav-item">
                <a href="#">Item 4</a>
            </li>
        </ul>
    )
}