I am trying to add authentication to a react website using firebase I currently have this createasyncthunk

    export const signin = createAsyncThunk<
  // Return type of the payload creator
  User | void,
  // First argument to the payload creator
  userData,
  // Types for ThunkAPI
  {
    rejectValue: errorInterface;
  }
>('authentication/signin',  (user, thunkApi) => {
  const { email, password } = user;
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in
      const user = userCredential.user;
      return user;
    })
    .catch((error) => {
      console.log(error.message, error.code)
      const errorMessage: errorInterface = { message: error.code };
      return thunkApi.rejectWithValue(errorMessage);
    });
});

the user type is imported from fire base the userData is the following interface to represent credentials used to log in

interface userData {
  email: string;
  password: string;
}

the error interface is the following

interface errorInterface {
  message: string;
}

the authentication slice is this

export const authSlice = createSlice({
  name: 'authentication',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(signin.pending, (state) => {
        state.status = 'loading';
        state.isAuth = false;
      })
      .addCase(signin.fulfilled, (state, action) => {
        state.status = 'idle';
        state.isAuth = true;
        if (action.payload) {
          state.user = action.payload;
        }
      })
      .addCase(signin.rejected, (state, action) => {
        state.status = 'failed';
        state.isAuth = false;
        if (action.payload) {
          state.message = action.payload.message;
        }
      })
  },
});

The problem is that signin.rejected is never trigered. Even when the catch block runs, rejectwithvalue is not updating the payload. I know the catch block is running because I can see the error in the console. Please help me out, thanks in advance