React State not Updating in DataGrid MUI

for some reason a column in my Material-UI DataGruid wont update upon state change?

Code for state var: const [brandMap, setBrandMap] = useState(new Map());

fetchBrands function (which changes state)

async function fetchBrands() {
  const accessToken = await getToken();
  await fetch("http://localhost:8000/auth/brands",
    {
      method: "GET",
      headers: {
        Authorization: `Bearer ${accessToken}`
      }
    })
  .then((data) => data.json())
  .then(data => {
    setBrandMap(prevState => ({ ...prevState, ...data.data.reduce((map, obj) => (map[obj.id] = obj.name, map), {}) }))
  })
};

Columns list that I pass into MUI DataGrid, note the "FetchData(1)" function gets the data that the columns use.

useEffect(() => {
    setColumns(({
        columns: [
        { field: 'image', headerName: '', filterable: false, renderCell: (params) => (
          <img src={params.value} style=/>
        )},
        { field: 'name', headerName: 'Name', editable: true, filterOperators, flex: 1 },
        { field: 'sku', headerName: 'SKU', editable: true, filterOperators, flex: 1 },
 ....
        { field: 'brand_id', headerName: 'Brand', editable: true, flex: 1, renderCell: (params) => (
          <Typography variant="body2" color="text.secondary" component="p" style= >
            {brandMap[params.value] ?? <CircularProgress size={20} />}
          </Typography>
        )},
...
]}))
        updateData(1)
        fetchBrands()
  }, [user])