Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

[awaistahseen009]

Action File

import * as AuthApi from "../api/AuthApi.js"
import { useDispatch } from "react-redux"
const dispatch=useDispatch()
export const logIn=(formData)=>async(dispatch)=>{
    dispatch({type:"AUTH_START"})
    try {
        const data=await AuthApi.logIn(formData)
        dispatch({type:"AUTH_SUCCESS",data:data})
    } catch (error) {
        console.log(error)
        dispatch({type:"AUTH_FAILED"})
    }
}
export const signUp=(formData)=>async(dispatch)=>{
    dispatch({type:"AUTH_START"})
    try {
        const {data}=await AuthApi.signUp(formData)
        dispatch({type:"AUTH_SUCCESS",data:data})
    } catch (error) {
        console.log(error)
        dispatch({type:"AUTH_FAILED"})
    }
}

Reducer Files

const authReducer=(state={authData:null,loading:false,error:false},action)=>{
        switch (action.type) {
            case "AUTH_START":
                return {...state,loading:true,error:false}
            case "AUTH_SUCCESS":
                //also storing the data in local storage 
                localStorage.setItem("profile",JSON.stringify({...action?.data}))
                return {...state,loading:false,authData:action.data}
            case "AUTH_FAILED":
                return {...state,error:true,loading:false}
            default:
                return state
        }
}
export default authReducer

Auth.jsx

import React from "react"
import "./Auth.css"
import Logo from "../img/logo.png"
import {useDispatch, useSelector} from "react-redux"
import { logIn, signUp } from "../api/AuthApi.js"
export default function Auth(){
    const [isSignUp,setSignUp]=React.useState(true)
    const [data,setData]=React.useState({firstname:"",lastname:"",password:"",confirmpass:"",username:""})
    const [confirmpass,setConfirmPass]=React.useState(true)
    const dispatch=useDispatch()
    const loading=useSelector((state)=>state.authReducer.loading)
    console.log(loading)
    const handleChange=(e)=>{
        setData({...data,[e.target.name]:e.target.value})

    }
    const resetForm=()=>{
        setConfirmPass(true)
        setData({firstname:"",lastname:"",password:"",confirmpass:"",username:""})
    }
    const handleSubmit=(e)=>{
        e.preventDefault()
        if(isSignUp){
           data.password===data.confirmpass ? dispatch(signUp(data)) : setConfirmPass(false)
        }
        else {
             dispatch(logIn(data))
        }
    }
    const spanStyle={
        cursor:"pointer",
        textDecoration:"underline",
    }
    return (
        <div className="Auth">
            <div className="a-left">
                <img src={Logo} alt="logo" />
                <div className="webname">
                    <h1>Mariana Chat</h1>
                    <h6>Explore the world and meet new people </h6>
                </div>
            </div>
            {/* New div */}
            <div className="a-right">
            <form  className="infoForm authForm" onSubmit={handleSubmit}>
                <h3>{isSignUp ? "Sign Up" : "Log In"}</h3>
                {
                    isSignUp && <div>
                    <input type="text" name="firstname" className="infoInput" placeholder="First Name" onChange={handleChange} value={data.firstname}/>
                    <input type="text" name="lastname" className="infoInput" placeholder="Last Name" onChange={handleChange} value={data.lastname}/>
                </div>
                }
                <div>
                <input type="text" name="username" className="infoInput" placeholder="Username" onChange={handleChange} value={data.username}/>
                </div>
                <div>
                <input type="password" name="password" className="infoInput" placeholder="Password" onChange={handleChange} value={data.password}/>
                {isSignUp &&
                <input type="password" name="confirmpass" className="infoInput" placeholder="Confirm Password" onChange={handleChange} value={data.confirmpass}/>
                }
                </div>
                <span className="confirmPass">
                    {confirmpass ? "" : "Password don't match"}
                </span>
                <div>
                    <span style={spanStyle} onClick={()=>{setSignUp(prev=>!prev)
                    resetForm()    
                }}
                    >{isSignUp ? "Already have an account . Login" : "Don't have an account , Sign Up"}</span>
                </div>
                <button className="infoButton" >Sign Up</button>
            </form>
        </div>
        </div>
    )
}

Kindly help I am struggling with this from 2 days