Multiple args using createAsyncThunk - reactjs

Question

I try to rewrite authentication tutorial from javascript into typescript. I encounter a problem as for createAsyncThunk arguments.
store.ts
import { configureStore } from "#reduxjs/toolkit";
import userReducer from './features/user';
export const store = configureStore({
reducer: {
user: userReducer,
},
devTools: true
})
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
user.ts
It seams there are some issue with arguments, any idea how to manage it using typescript?
import { createAsyncThunk, createSlice } from '#reduxjs/toolkit'
import {RootState} from "../store"
import { API_URL } from "../config/index";
export interface UserState {
isAuthenticated: boolean,
user: null,
loading: boolean,
registered: boolean
}
const initialState: UserState = {
isAuthenticated: false,
user: null,
loading: false,
registered: false
}
export const register = createAsyncThunk('/api/user/create/', async ({name, email, password}, thunkAPI) => {
const body = JSON.stringify({name, email, password})
try {
const res = await fetch(`${API_URL}/api/user/create/`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body
})
// const data: UserState[] = await res.json();
const data = await res.json();
if (res.status === 201) {
return data;
} else {
return thunkAPI.rejectWithValue(data);
}
} catch(err: any) {
return thunkAPI.rejectWithValue(err.response.data);
}
});
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
resetRegistered(state) {
state.registered = false;
},
},
extraReducers: builder => {
builder
.addCase(register.pending, state => {
state.loading = true;
})
.addCase(register.fulfilled, state => {
state.loading = false;
state.registered = true;
})
.addCase(register.rejected, state => {
state.loading = false;
})
}
})
export const selectUser = (state: RootState) => state.user;
export const { resetRegistered } = userSlice.actions
export default userSlice.reducer
Register.tsx (here I get error when dispatch register() -> Expected 0 arguments, but got 1)
import { useState } from "react";
import Layout from '../components/Layout';
import { Navigate } from "react-router-dom";
import { MDBInput} from "mdb-react-ui-kit";;
import { useAppDispatch, useAppSelector } from '../hooks'
import { register, selectUser } from '../features/user';
const initialState = {
name: "",
email: "",
password: "",
confirmPassword: "",
}
const RegisterPage = () => {
const [formData, setFormData] = useState(initialState);
const {name, email, password, confirmPassword} = formData;
const [showRegister, setShowRegister] = useState(false);
const {registered, loading} = useAppSelector(selectUser);
const dispatch = useAppDispatch();
const handleChange = (e: any) => {
setFormData({ ...formData, [e.target.name]: e.target.value})
};
const onSubmit = (e: any) => {
e.preventDefault();
dispatch(register({name, email, password})); //Expected 0 arguments, but got 1
}
if (registered) {
return <Navigate to='/login'/>
}
return (
<Layout>
<form onSubmit={onSubmit} className="mt-5">
<div className="form-group">
<label htmlFor="name" className="form-label">
<MDBInput
type="text"
name="name"
value={name}
onChange={handleChange}
label="Name"
className="form-control form-control-lg"
/>
</label>
<label htmlFor="email" className="form-label">
<MDBInput
type="email"
name="email"
value={name}
onChange={handleChange}
label="Email"
className="form-control form-control-lg"
/>
</label>
<label htmlFor="password" className="form-label">
<MDBInput
type="password"
name="password"
value={name}
onChange={handleChange}
label="Password"
className="form-control form-control-lg"
/>
</label>
</div>
<button
className="btn btn-outline-light btn-lg px-5"
>
Register
</button>
</form>
</Layout>
)
}
export default RegisterPage;