How can I convert this link to a array mapping object

import React, { useContext } from "react";
import { Link, useLocation } from "react-router-dom";
import { OrderContext } from "../../../context/orderContext";
import { getSumOfArray } from "../../../service/helper";
import { Cart, Product, Person, Receipt } from "../../../utility/icons";

const BottomNavigation = (props) => {
	const { hidden, handleAccount } = props;
	const { state } = useContext(OrderContext);
	const location = useLocation();
	const badgeCount = getSumOfArray(state?.invoices?.map(invoice => invoice.quantity));


	const getActivePaths = () => {
		switch (location.pathname) {
			case '/settings':
			case '/contact':
			case '/termsandconditions':
            case '/privacypolicy':
            case '/accessibility':
				return 'text-secondary group-hover:text-secondary'
			default:
				return 'text-black group-hover:text-black'
		}
	}

	const handleClick = () => {
		handleAccount();
	}

	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>
	)
}

export default BottomNavigation;