I have a saveTrip function that is a redux async thunk. However, i am getting very weird behavior as only my first promise is resolved as "fulfilled" and every promise after that is "rejected"

export const saveTrip = createAsyncThunk(
    'trip/saveTrip',
    async (payload, thunkAPI) => {
        const trip = thunkAPI.getState().trip
        const result = await fetch(
            'http://localhost:5000/savetrip', {
            mode: 'cors',
            credentials: 'include',
            method: "post",
            body: JSON.stringify({ trip }),
            headers: {
                'Content-Type': 'application/json'
            },
        })
        const response = await result.json()
        return response
    }
)

Whats more unusual is that i stumbled upon a bandaid fix by implementing debounce like so :

export const saveTrip = createAsyncThunk(
    'trip/saveTrip',
    debounce(async (payload, thunkAPI) => {
        const trip = thunkAPI.getState().trip
        const result = await fetch(...)
        const response = await result.json()
        return response
    }, 5000)
)

Debounce doesnt actually "work" as i expect debounce to, but now, every promise is getting fulfilled with the expected data in the responses. Im pretty sure this is not a proper solution but I am very confused as to what's happening.

My goal is to just save my current state into my DB and i just call saveTrip whenever a reducer that changes my state is dispatched.