No overload matches this call ReduxToolkit and TypeScript

I am trying to use Custom hooks for useDispatch and useSelector as

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "../store";

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

and here is my reducer action:

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
// import { T } from "../store";
// making a type object
type TPayload = {
  email: string | null | undefined;
};

// actual initial state for this slice
const initialState: TPayload = {
  email: "",
};

// exporting the Slice with actions in it
export const profileSlice = createSlice({
  name: "profile",
  initialState: initialState,
  reducers: {
    changeEmail: (
      state = initialState,
      { payload }: PayloadAction<TPayload>
    ) => {
      state.email = payload.email;
    },
  },
});

//exporting the reducer function
export const profileReducer = profileSlice.reducer;

Now whenever i am calling my hook in a component i get TS error, here is how i am using it:

import { useContext, useEffect } from "react";
import MyContext from "./context/createContext";
import { changeProfileEmail } from "./slices/profileActions";
import { TStore } from "./store";
import { useAppDispatch, useAppSelector } from "./utils/hooks";

const App = () => {
  useEffect(() => {
    const str =
      "https://ihunt.vteamslabs.com/api/public/storage/stands/4/ownerships/1644916157_0_I-Hunt_Development_Notes.pdf";
    console.log(str.split(".").pop());
  }, []);
  const emailString = "asad.ashraf@nxb.com.pk";
  const dispatch = useAppDispatch();
  const { email } = useAppSelector((state: TStore) => state.profileReducer);
  const handleEmailChange = () => {
    dispatch(changeProfileEmail(emailString));
  };
  const message = useContext(MyContext);
  return (
    <div>
      <button onClick={handleEmailChange}>Change email</button>
      <h2>Email: {email}</h2>
      <h2>TB: {message}</h2>
    </div>
  );
};

export default App;

The error is on code dispatch(changeProfileEmail(emailString)); saying:

No overload matches this call. The last overload gave the following error. Argument of type '(dispatch: AppDispatch) => Promise' is not assignable to parameter of type 'AnyAction | ThunkAction<Promise, { profileReducer: TPayload; }, undefined, AnyAction>'. Type '(dispatch: AppDispatch) => Promise' is not assignable to type 'ThunkAction<Promise, { profileReducer: TPayload; }, undefined, AnyAction>'. Types of parameters 'dispatch' and 'dispatch' are incompatible.

Please help me understand what is going on here, i am new to TS. And how can i understand these errors?