React JS Как правильно отобразить Категории и Подкатегории

Столкнулся с проблемой отображения Категорий и Подкатегорий в React JS.

У меня есть такой набор данных получаемый от сервера.

[
    {
        "id": 2,
        "name": "Телефоны",
        "sub_category": [
            {
                "id": 1,
                "name": "Сматрфоны"
            },
            {
                "id": 2,
                "name": "Кнопочные телефоны"
            }
        ]
    },
    {
        "id": 1,
        "name": "Гарнитура",
        "sub_category": [
            {
                "id": 3,
                "name": "Наушники"
            }
        ]
    },
    {
        "id": 3,
        "name": "Комплектующие для ПК",
        "sub_category": [
            {
                "id": 4,
                "name": "Видеокарта"
            }
        ]
    }
]

Я в Navbar вывел название категорий в список <li> через .map, хотел то же самое сделать и с Подкатегориями но IDE подсказывает об "Непредвиденный Токен"

Navbar.jsx

import React from "react";
import {Link} from 'react-router-dom';

const Navbar = ({cat}) => {
    console.log(cat);
    return (
        <div className="navbar" >
            <div className="navbar__links" >
                <Link to="/" style={{ padding: 20 }}>Главная Страница</Link>
            </div>
            <div>
                {cat.map((cat) => (
                    <div className="category">
                        <li>{cat.name}</li>
                        <div className='subcategory'>
                            <li>{cat.sub_category.map((cat.sub_category)=>  (
                                {cat.sub_category.name}
                            ))}
                            </li>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};
export default Navbar;

App.js

import  React, {useState ,useEffect} from 'react';
import VdsServices from './components/API/VdsService';
import Main from './pages/main';
import Navbar from './components/UI/Navbar';

function App() {
  const [category,setCategory] = useState([])
  
  useEffect(() => {
    getCategorys();
  }, [])

  async function getCategorys() {
    const cat = await VdsServices.get_category();
    setCategory(cat);
  };

  return (
    <BrowserRouter>
      <Navbar cat = {category} />
      <Routes>  
          <Route path='/' element={<Main/>} />
          <Route path='*' element={<Navigate to='/'/>}/>  
      </Routes> 
      </BrowserRouter>
  );
}

export default App;