Take into account when our promise is rejected in a createAsyncThunk function, it passes the error as an object inside of returned action.
So instead of action.payload, you should use action.error.message, or destructure error and error.message in order to update the error state.
Improvement for the code
It has a bug, basically when you received the error message once, the loading state do not show, so you have to set the error state to null in the pending extra reducer.