Not able to set serializability to false in redux-toolkit

I am just trying to call my asyncthunk funtion and signup the user but i am getting this error I just need to set the serializability to false if there is any other option where where i do not need to set it to off please recommend.

Error Image

Here is my store.js

    import {
  configureStore,
  createSerializableStateInvariantMiddleware,
  getDefaultMiddleware,
} from "@reduxjs/toolkit";
// import { Iterable } from "immutable";
import authReducers from "./reducers/authReducers";
export default configureStore({
  reducer: {
    auth: authReducers,
    middleware: [
      ...getDefaultMiddleware({
        serializableCheck: false,
      }),
    ],
  },
});

my reducer

import { createSlice } from "@reduxjs/toolkit";
import { createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
export const authSlice = createSlice({
  name: "Auth",
  initialState: {
    name: "",
    email: "",
  },
  reducers: {},
});

export default authSlice.reducer;
// export const { increment } = authSlice.actions;
export const signupUser = createAsyncThunk(
  "auth/signupUser",
  async (payload) => {
    const data = await axios({
      url: "http://fathomless-meadow-37873.herokuapp.com/auth/signup",
      method: "POST",
      data: payload,
    });
    return data;
  }
);

and my signup component

import { Flex, Input } from "@chakra-ui/react";
import React from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { increment } from "../../reducers/authReducers";
import { signupUser } from "../../reducers/authReducers";
import { unwrapResult } from "@reduxjs/toolkit";
import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  InputGroup,
  InputRightElement,
  Button,
  Divider,
  Text,
  useToast,
} from "@chakra-ui/react";
export default function SignUp() {
  const dispatch = useDispatch();
  const toast = useToast();
  const [show, setShow] = useState(false);
  const handleClick = () => setShow(!show);
  const data = useSelector((state) => state.auth.count);
  const [formData, setFomData] = useState({
    username: "",
    email: "",
    password: "",
  });
  //function to set the data entered by the user
  const handleFormData = (event) => {
    setFomData({
      ...formData,

      [event.target.name]: event.target.value,
    });
  };
  const signup = async () => {
    dispatch(signupUser(formData))
      .then(unwrapResult)
      .then((res) => {
        console.log(res);
        toast({
          title: "Account created.",
          description: "We've created your account for you.",
          status: "success",
          duration: 3000,
          isClosable: true,
        });
      })
      .catch((err) => {
        toast({
          title: "Account cannot be created.",
          description: "User already exists",
          status: "error",
          duration: 3000,
          isClosable: true,
        });
      });
  };
  return (
    <Flex>
      <FormControl>
        <Divider mb={4}></Divider>
        <FormLabel>Full Name</FormLabel>
        <Input name="username" onChange={handleFormData} type="text" />
        <FormHelperText>Eg : Jane Doe</FormHelperText>
        <FormLabel mt={3}>Email address</FormLabel>
        <Input name="email" onChange={handleFormData} type="email" />
        <FormHelperText>We'll never share your email.</FormHelperText>
        <InputGroup mt={4} size="md">
          <Input
            pr="4.5rem"
            type={show ? "text" : "password"}
            name="password"
            onChange={handleFormData}
            placeholder="Enter password"
          />
          <InputRightElement width="4.5rem">
            <Button h="1.75rem" size="sm" onClick={handleClick}>
              {show ? "Hide" : "Show"}
            </Button>
          </InputRightElement>
        </InputGroup>

        <Button onClick={signup} colorScheme="purple" w="100%" mt={5}>
          Submit
        </Button>
      </FormControl>
    </Flex>
  );
}

Any help would be appreciated