I have two models for Category and subcategory.

The category model returns an array of data like

category = [ 
    {_id: '1', name: 'Appliances', slug: 'appliances'}, 
    {_id: '2', name: 'Computer', slug: 'computer'}, 
    {_id: '3', name: 'Phones', slug: 'phones'}, 
]

The subcategory model returns

subcategory = [
   { _id: '101', name: 'fridge', category: '1'}, 
   {_id: '102', name: 'Radio', category: '1'}, 
   {_id: '103', name: 'Apple', category: '3'}, 
   {_id: '105', name: 'Toshiba', category: '2'}, 
   {_id: '109', name: 'HP', category: '2'}, 
]

I want to return something that looks like this:

[
  {_id: '1', name: 'Appliances, subCategories: [
       { _id: '101', name: 'fridge', category: '1'}, 
       {_id: '102', name: 'Radio', category: '1'}, 
    ] 
  },
  {_id: '2', name: 'Computer, subCategories: [
       {_id: '105', name: 'Toshiba', category: '2'}, 
       {_id: '109', name: 'HP', category: '2'}, 

    ] 
  },
  {_id: '3', name: 'Computer, subCategories: [
       {_id: '103', name: 'Apple', category: '3'}, 
    ] 
  }
]

Here is the code i have so far

const [categories, setCategories] = useState([])
  const [subCategories, setSubCategories] = useState([])

  useEffect(() => {
    loadSubCategories()
  }, [])


  const loadSubCategories = async () => {
    const res = await getAllSubCategories()
    setCategories(res.subCategory)
    setTotal(res.length)
  }


const getAllSubCategories = () => {
  return request('/subCategories', {
    method: 'GET',
  })
}

This only loads my subcategories tho. my category route is /categories