I am right now learning tanstack query and want to make a post request. All works as expected but it makes two request.

POST api/auth/forgot_email
OPTIONS api/auth/forgot_email

The first one (POST) is the right one but why he makes the OPTIONS ?

Query:

import { URL } from "../../utils/url";
import axios from "axios";
import { IEmailForgot } from "./types";
import { headersJSON } from "../../utils/axiosJsonOption";
import { IReturnApi } from "../types";

export const EmailForgotAPI = async (phone: IEmailForgot) => {
  const res = await axios.post(`${URL}/auth/forgot_email`, phone, {
    headers: headersJSON,
    data: phone
  });

  const data: IReturnApi<{email: string;}> = await res.data();

  return data;
};

ForgotEmail:

import InputWithIcon from "../InputWithIcon/InputWithIcon"
import CIcon from '@coreui/icons-react'
import { cilPhone } from '@coreui/icons'
import GoBack from "../GoBack/GoBack"
import { IEmailReset } from "./types"
import { useMutation } from "@tanstack/react-query"
import { EmailForgotAPI } from "../../api/emailForgot/emailForgot.api"

function EmailReset({
  onClick
}: IEmailReset) {
  const mutation = useMutation({
    mutationFn: EmailForgotAPI,
    onSuccess: (data) => {
      console.log(data);
      console.log('HI')
    }
  });

  const handleSend = () => {
    mutation.mutate({phone: '0377712211'});
  };
  return (
    <section className="login-box fd-col relative">
      <GoBack onClick={onClick} />
      <h2>Forgot email</h2>

      <form method="POST">
        <InputWithIcon 
          icon={<CIcon color="black" icon={cilPhone} size="custom-size" height={16} width={16} />}
          placeholder="Mobilnummer"
        />

        <button type="button" onClick={handleSend} className="btn-main">
          Senden
        </button>
      </form>
    </section>
  )
}

export default EmailReset

What could be the problem and how can I solve it ?