fetch in react doesn't return sub arrays from local express server

I have an express server that seems to work fine when I make get requests using Postman, but when I've tried using either fetch or axios in react all I get is the id and name. I've tried this synchronously as well with similar results.

When I had the data hard coded the interface worked perfectly and displayed all the pro/cons.

This is App.js where I fetch the data and pass it to the

import {useState, useEffect} from "react";
import { hot } from 'react-hot-loader/root'
import Header from "./components/header";
import Select from "./components/select.js";
import ProsCons from "./components/pros-cons.js";


function App(){
    const [catState,setCatState] = useState("");
    const [catPros, setCatPros] =  useState([]);
    const [catCons, setCatCons] =  useState([]);

    const [categories, setCategories] = useState([]);  
    
   
        
    useEffect( ()=> {
        async function GetCats(){ 
    
             const response = await fetch('/api/categories')
                const data = await response.json() 
                console.log(data)
                setCategories(data)
        }
        GetCats()
},[])
   
         
    const chooseCat = (e) => {
        const id = e.target.value;
        const selectedCat = categories.filter((cat) => cat.id === id)[0];
        if(selectedCat){
            const selectedPros = selectedCat.pros[0].split(',');
            const selectedCons = selectedCat.cons[0].split(',');
            setCatState(selectedCat);
            setCatPros(selectedPros);
            setCatCons(selectedCons);
        };
}
    return(
        <div className="container">
            
            <Header />
            <form>
             
            {categories.length > 0 ?
              <Select categories={categories}
                onSelect={chooseCat}
              />:' No Options'}
              {catState && <ProsCons pros={catPros} cons={catCons}/>}
                
            
            </form>
        </div>
    )
}
export default hot(App);

This is what a console.log output looks like

cons: (4) ["Bad acoustics", "bad service", "rude staff", "over priced"]
id: 1
name: "Restaurant"
pros: (4) ["Great Menu", "good food", "Great Beer list", "live music"]
__proto__: Object
1:
cons: ["Bad acoustics, bad crowd, small space, over priced"]
id: 2
name: "Music Venue"
pros: ["Good seating, Music Variety, Good Dance Floor, Good Bar, Good Food"]
__proto__: Object
2:
cons: ["Crowded, Horses/Bicycles, Burn Zone, Biting Bugs"]
id: 3
name: "Hiking Trail"
pros: ["Spectacular Scenery, Great Destination, Swimming, Drinking Water"]
__proto__: Object
3:
cons: (4) ["Upfront cost for use", "Inconsistent Interface", "Crashes Often", "Requires Excess Configuration"]
id: "5140c74f-91e3-4c23-803c-6966a623677d"
name: "Code Editors"
pros: (4) ["Great Community Support", "Intuitive interface", "Regularly Updated", "Support for many Code Languages"]
__proto__: Object
length: 4
__proto__: Array(0)

. All those proto:object have an array of what might be js properties. Here is an image

This was the network response

[
    {
        "id": 1,
        "name": "Restaurant",
        "pros": ["Great Menu", "good food", "Great Beer list", "live music"],
        "cons": ["Bad acoustics", "bad service", "rude staff", "over priced"]
    },
    {
        "id": 2,
        "name": "Music Venue",
        "pros": [
            "Good seating, Music Variety, Good Dance Floor, Good Bar, Good Food"
        ],
        "cons": ["Bad acoustics, bad crowd, small space, over priced"]
    },
    {
        "id": 3,
        "name": "Hiking Trail",
        "pros": [
            "Spectacular Scenery, Great Destination, Swimming, Drinking Water"
        ],
        "cons": ["Crowded, Horses/Bicycles, Burn Zone, Biting Bugs"]
    },
    {
        "id": "5140c74f-91e3-4c23-803c-6966a623677d",
        "name": "Code Editors",
        "pros": [
            "Great Community Support",
            "Intuitive interface",
            "Regularly Updated",
            "Support for many Code Languages"
        ],
        "cons": [
            "Upfront cost for use",
            "Inconsistent Interface",
            "Crashes Often",
            "Requires Excess Configuration"
        ]
    }
]

When I enter this http://localhost:8080/api/categories in Postman

I get

[
    {
        "id": 1,
        "name": "Restaurant",
        "pros": [
            "Great Menu",
            "good food",
            "Great Beer list",
            "live music"
        ],
        "cons": [
            "Bad acoustics",
            "bad service",
            "rude staff",
            "over priced"
        ]
    },
    {
        "id": 2,
        "name": "Music Venue",
        "pros": [
            "Good seating, Music Variety, Good Dance Floor, Good Bar, Good Food"
        ],
        "cons": [
            "Bad acoustics, bad crowd, small space, over priced"
        ]
    },
    {
        "id": 3,
        "name": "Hiking Trail",
        "pros": [
            "Spectacular Scenery, Great Destination, Swimming, Drinking Water"
        ],
        "cons": [
            "Crowded, Horses/Bicycles, Burn Zone, Biting Bugs"
        ]
    },
    {
        "id": 4,
        "name": "Code Editors",
        "pros": [
            "Great Community Support",
            "Intuitive interface",
            "Regularly Updated",
            "Support for many Code Languages"
        ],
        "cons": [
            "Upfront cost for use",
            "Inconsistent Interface",
            "Crashes Often",
            "Requires Excess Configuration"
        ]
    }
]

This is how I am trying to fetch. I have a proxy setup to complete the url and if I add a new category the name shows up in the interface.

useEffect( ()=> {
        async function GetCats(){ 
    
             const response = await fetch('/api/categories')
                const data = await response.json()            
                setCategories(data)
        }
        GetCats()
},[])

Please tell me what other code you need to see

I think this is a case of too much noise in the data. Any ideas about how its might be getting there and how I can get rid of it

Any help would be appreciated. Thanks