ReactJS - Convert to Array Mapping

Question

How can I convert this link to a array mapping, I already tried making a array object with name, path, icons, and label properties. But when I do that the cart icon is always duplicating because of the array index.

What I want is if I my route is in the order page the cart icon will start to turn red and if I proceed to payment the cart icon is still in red color same with order review.

Hope you can help me with this. Thanks.

return (
            <div className="fixed w-full bottom-0 border-t border-gray-50 bg-white z-10" hidden={hidden}>
                <nav className="flex justify-evenly align-items-center h-16" aria-label="tabs">
                    <Link to='/menu' className={`w-1/4 flex flex-col items-center justify-center cursor-pointer`}>
                        <Product fill={'none'} stroke={location.pathname === '/menu' ? '#751132' : 'black'} className={`flex align-content-center stroke-0 primary-icon h-7 w-7`} aria-hidden="false" role="button" aria-label="Shop Icon - Menu Selection  Page" />
                    </Link>
                    <Link to='/order' className={`w-1/4 flex flex-col items-center justify-center cursor-pointer`}>
                        <Cart fill={'none'} stroke={location.pathname === '/order' || location.pathname === '/payment' || location.pathname === '/orderreview'  ? '#751132' : 'black'} className={`flex align-content-center h-7 w-7 primary-icon`} aria-hidden="false" role="button" aria-label="Cart Icon - Items Are In The Cart" />
                        {
                        badgeCount > 0 &&
                        <span className="absolute top-4 ml-6 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">{badgeCount}</span>
                        }           
                    </Link>
                    <Link to='/purchasehistory' className={`w-1/4 flex flex-col items-center justify-center cursor-pointer`}>
                        <Receipt fill={'none'} stroke={location.pathname === '/purchasehistory' ? '#751132' : 'black'} className={`flex align-content-center h-7 w-7 primary-icon`} aria-hidden="false" role="button" aria-label="Receipt Icon - Review Processed Order(s)" />
                    </Link>
                    <button className={`w-1/4 flex flex-col items-center justify-center cursor-pointer`} onClick={handleClick} >
                        <span className="sr-only">Open sidebar</span>
                        <Person className={`flex align-content-center h-7 w-7 primary-icon  ${getActivePaths()}`} aria-hidden="false" role="link" aria-label="Avatar Icon - User Profile" />
                    </button>
                </nav>
            </div>
        )