Error: Mapping an object with an integrated react-icon

I've got an object that I'm trying to map over. I keep getting this error:

SyntaxError: Unexpected token '<' (at navigation.js?t=1663213543000:18:11).

It's referring to the icon. It should work though... React-Icons "^4.4.0" is installed.

Here's a sandbox recreation without the issue...

https://codesandbox.io/s/brave-sea-sholnc?file=/src/navigation.js

navigation.js

import React from 'react';
import { RiContactsLine } from 'react-icons/ri';

export const links = [
   {
      title: 'Dashboard',
      links: [
           {
              name: 'ecommerce',
              icon: <RiContactsLine />,
           },
      ],
   }
]

If I comment out the icon line, it'll display Dashboard and ecommerce, but won't render with the icon line included. Here's the file that maps over it:

Sidebar.jsx

import { links } from '../../Data/navigation.js';
import { Link, NavLink } from "react-router-dom";

const Sidebar = () => {

  return (

    <div className="sidebar-container">
        <div className="sidebar shadow-md">

            {links.map((item) => (
              <div key={item.title}>
                <p className="text-gray-400 m-3 mt-4 uppercase title">
                  {item.title}
                </p>
                {item.links.map((link) => (
                  <NavLink 
                    to={`/${link.name}`}
                    key={link.name}
                  >
                      {link.icon}
                      <span className="capitalize">
                          {link.name}
                      </span>
                  </NavLink>
                ))}
               </div>
              ))}
        </div>
    </div>
  )
}

export default Sidebar

Please help! Thanks!