How to use Next Auth for OTP login?

I’m new to Next Js. Please help me to solve this. I’ve been trying to authenticate my OTP using Next Auth. But I don’t know how to pass the values from component to […nextauth].js

Used signIn property in a function that gets called when I give a right OTP.

  function signInHandler() {
    signIn();
    router.push('/')
  }

My UI where I have the input box and Login Button

  const detail = {
    title: (
      <div style={{ width: "100%" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
          }}
        >
          <h3 onClick={callApi}>OTP Verification</h3>
          <div onClick={() => setOtpModal(false)}>X</div>
        </div>
        <div style={{ width: "100%" }}>
          <SmallText style={"text"}>OTP</SmallText>
        </div>
      </div>
    ),
    body: (
      <div style={{ textAlign: "left", width: "100%" }}>
        <div style={{ marginTop: "10px", textAlign: "left", display: "flex" }}>
          <div>
            <SmallText style={styles.stylesheet.text}>
              {validity && " Did not receive OTP ?"}
              {!validity && (
                <div style={{ display: "flex" }}>
                  <div style={{ display: "flex" }}>
                    <Warning /> <div  style={{"margin":"0px 0px 0px 10px"}} >OTP seems to be invalid</div>
                  </div>
                </div>
              )}
            </SmallText>
          </div>
          <div>
            <SmallText style={"glow"}>Resend OTP</SmallText>
          </div>
        </div>

Called the SignInHandler function here to login using “signIn()” in this Button.

        <button style={styles.stylesheet.btnStyle} onClick={signInHandler}>
          Login !
        </button>

My current […nextauth].js

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import axios from "axios"
import { API_URL } from "./../../../helpers/api/mutations"
import OtpVerification from './../../../components/Components/SignIn/OtpVerification';

This is the place I got stuck. I’m trying to give my API call here with “SignIn” from OTP Verification Component. I want to replace the Email credential to OTP based. Is it possible ?

export default NextAuth({
  providers:[
    Providers.Email({
      // Need the credentials. In my case the OTP to get passed here.
      },
    }),
  ],
  secret: process.env.SECRET,
  session: {
    jwt: true,
  },

Login API call hits when I use signIn(). I first tried with async authorize but it was failed in my case.

  callbacks: {
    jwt: async ({ token, users }) => {
      const user = await axios({
        url: API_URL,
        method: "post",
        data: {
          query: `mutation{
                  login(
                   mobileNumber: "1111111146",
                  mobileCountryCode: "00",
                      password: "admin123"
                ) {
                      expiresAt
                      accessToken
                  }
              }`,
        },
      }).then((result) => {
        console.log(result.data.data,'result')
        return result.data
      })

      token = user.data.login.accessToken

      return user

    },
    session: ({ session, token }) => {
      if (token) {
        session = token
      }

      return session
    },
  },
  theme: {
    colorScheme: "dark",
    brandColor: "",
    logo: "/logo.png",
  },
  debug: process.env.NODE_ENV === "development"
})