페이지 이동하는 메뉴 질문드립니다

이런 UI에서 하단 nav 고정 바를 만들고있는데요

----------------------------------------

import React from 'react';
import {Routes, Route, Link, useNavigate} from 'react-router-dom';
import {useState, useEffect} from 'react';

function NavCom(){
      let[active, setActive] = useState(0) 
      let [nav, setNav] = useState([
        <i className='icon-l home'></i>, 
        <i className='icon-l search'></i>, 
        <i className='icon-l allmenu'></i>, 
        <i className='icon-l sns'></i>, 
        <i className='icon-l my'></i>
      ])//하단 nav 아이콘
      let [menu, setmenu] = useState([ "/", "/search", "/allmenu", "/sns", "/my"]) // menu 링크

     let toggleActive=(e)=>{
      setActive(()=>{
        return e.target.value;
      })
     }
    return(
      
        <nav className='navigation'>
        <ul className='navigation-wrap'>
          {
            nav.map((a, i)=>{
             return(
              <li key={i}
              value={i}
              className={'navigation-list' + (i == active ? " --active" : " ")}
              onClick={toggleActive}
              >
                  <Link to={menu[i]} > {nav[i]} </Link>
              
             )
            })
          }
      
        
      </nav>
    )
}

export default NavCom;

----------------------------------------
.navigation{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--navigateHeight);
  border-top: 1px solid #ddd;
  padding: .5rem 0;
  z-index: 10;
  background: #fff;
}
.navigation-wrap{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.navigation-list{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.navigation-list a{
  display: flex;
  align-items: center;
  justify-content: center;
  
}
----------------------------------------
질문입니다. 
메뉴명을 클릭하면 li에 addClass 되도록 짰는데 하위에 Link를 사용하여 페이지 이동도 가능하게 하고싶습니다.

근데 Link의 a태그 를 li만큼 사이즈를 주면 링크이동은 가능하나 li의 이벤트가 먹지않아서
질문드립니다. 링크이동과 li의 클릭된 부분 --active 가 먹도록 어떻게 해야할까요