axios post request in create async thunk redux toolkit works in development but throws 504 error in production on vercel next js

Question

The POST request of axios in createAsyncThunk works fine in development but when I deploy the web on Vercel it waits for some seconds and then throw 504 response. Here is the response on production:

Promise {<pending>, requestId: 'nWTIWtmH2NZYeQlP9E_d-', arg: {…}, abort: ƒ, …}abort: ƒ (a)arg: {username: 'hassan', password: 'admin'}requestId: "nWTIWtmH2NZYeQlP9E_d-"unwrap: ƒ ()[[Prototype]]: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag): "Promise"[[Prototype]]: Object[[PromiseState]]: "pending"[[PromiseResult]]: undefined        
POST https://crvsdash.vercel.app/api/adminlogin 504

I tried many things like putting cross origin allow headers, proxy url in package JSON, but I cant figure out why It didnt work in production but works perfectly in development..Here is the slice of Redux toolki to post request:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
  admin: null,
};

export const validateAdmin = createAsyncThunk(
  'Admin/validateAdmin',
  async (initialCred) => {
    console.log(initialCred);
    return await axios
      .post('/api/adminlogin', {
        method: 'POST',
        data: initialCred,
      })
      .then((res) => res.data);
  }
);
const adminSlice = createSlice({
  name: 'Admin',
  initialState,
  extraReducers: (builder) => {
    builder.addCase(validateAdmin.fulfilled, (state, action) => {
      state.admin = action.payload;
    });
  },
});

export default adminSlice.reducer;

Here is the api i am fetching (next api)

import Admin from '../../models/Admin/Admin';
import connectDB from '../../middleware/mongoose';
var CryptoJS = require('crypto-js');
var jwt = require('jsonwebtoken');

const handler = async (req, res) => {
  if (req.method == 'POST') {
    console.log(req.body);
    const admin_user = await Admin.findOne({
      username: req.body.data.username,
    });
    if (admin_user) {
      const bytes = CryptoJS.AES.decrypt(
        admin_user.password,
        process.env.AES_SECRET
      );
      let decryptedPass = bytes.toString(CryptoJS.enc.Utf8);
      if (
        req.body.data.username == admin_user.username &&
        req.body.data.password == decryptedPass
      ) {
        var token = jwt.sign(
          {
            username: admin_user.username,
          },
          process.env.JWT_SECRET,
          {
            expiresIn: '10d',
          }
        );
        res.status(200).json({ success: true, token });
      } else {
        res.status(200).json({
          success: false,
          message: 'Invalid Credentials. Please Try Again.',
        });
      }
    } else {
      res.status(200).json({
        success: false,
        message: `No User Registered with ${req.body.data.username}`,
      });
    }
  } else {
    res.status(200).json({ message: 'This method is not allowed' });
  }
};

export default connectDB(handler);

The body credential data from form is coming to the asnync thunk but it have complication sending the request. here is the dispatching i am doing in my form:

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [passwordVisibility, setPasswordVisibility] = useState(false);
  const handleChange = (e) => {
    if (e.target.name == 'username') {
      setUsername(e.target.value);
    } else if (e.target.name == 'password') {
      setPassword(e.target.value);
    }
  };
  const dispatch = useDispatch();
  const handleSubmit = async (e) => {
    e.preventDefault();
    dispatch(validateAdmin({ username, password }));
  };
  const admin = useSelector((state) => state.admin.admin);
  console.log(admin);

i have tried many things but still failed. The main thing it also didnt worked on heroku. Every env variable is entered correctly i double checked them too. And it also send fine request in postman or thunderclient.