I am working on a React application and I am using Redux to store the state. I have the following code:

menu.types.js:

```
export const FETCH_CATEGORY_RANKS = "FETCH_CATEGORY_RANKS";

```

menu.actions.js:

```
    import { apiUrl, apiConfig } from '../../util/api';
    import { FETCH_CATEGORY_RANKS } from './menu.types';

    export const fetchCategoryRanks = menu => async dispatch => {
    console.log("Printing menu (fetch category ranks)");
    console.log(menu);

    menu.map(category => {
        const options = {
            ...apiConfig(),
            method: 'PUT',
            body: JSON.stringify(category)
        }
        const response = await fetch(`${apiUrl}/category/${category._id}`, options)
        let data = await response.json()
        if (response.ok) {
            console.log("It got sent")
        } else {
            alert(data.error)
        }
    });

    dispatch({ type: FETCH_CATEGORY_RANKS, menu });

}

```

menu.reducer.js:

```
// import INITIAL_STATE from './menu.data';
import { FETCH_CATEGORY_RANKS } from './menu.types';

const INITIAL_STATE = []

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case FETCH_CATEGORY_RANKS:
           return state;
        default:
            return state;
    }
}

```

In my `fetchCategoryRanks` action creator, I am looping through the `menu` array which is given as a parameter to this function. For each category object in the menu, I am sending information about this category to a server through making a PUT request using fetch.

However, I am getting the following error:

[![enter image description here](https://i.stack.imgur.com/umCX4.png)](https://i.stack.imgur.com/umCX4.png)

I am not sure why I am getting this error or how to resolve it. Any insights are appreciated.