Why is my ngrx parameter showing an error?

I have the following service that signs up a user:

public signup = (user:UserModel) => {
console.log('UserService.user', user)

return this.httpClient.post<{user:UserModel}>(this.url, {user}).pipe(
tap(user => {
console.log('UserService.user tap', user)
this.store.dispatch(StoreUser({user}))
})
)
}


I am trying to dispatch the user received from the backend to the StoreUser action but I am getting an error. The user parameter in this line this.store.dispatch(StoreUser({user}) has a red line indicating an error. The error which appears to be a type error is shown below:

Type '{ user: UserModel; }' is missing the following properties from type 'UserModel': firstName, lastName, password, email, tokents(2739) user.actions.ts(6, 13): The expected type comes from property 'user' which is declared here on type '{ user: UserModel; }' (property) user: UserModel
​

This is the UserModel class:

export class UserModel {
public firstName:string = '';
public lastName:string = '';
public password:string = '';
public email:string = '';
public token:string = '';
}


This is the action:

import { createAction, props } from "@ngrx/store";
import { UserModel } from "./user.model";

export const StoreUser = createAction(
'[Store user] Store user',
props<{ user:UserModel }>()
);

Continue reading...