I just learned TS, and after a while of coding, got this issue:

No overload matches this call.

Overload 1 of 3, ‘(extraArgument?: null | undefined, options?: SWRMutationConfiguration<ProcessLoginResponse, Payload, Key, never, ProcessLoginResponse> | undefined): Promise<…>’, gave the following error. Argument of type ‘{ email: string; password: string; }’ is not assignable to parameter of type ‘null | undefined’.

Overload 2 of 3, ‘(extraArgument?: null | undefined, options?: (SWRMutationConfiguration<ProcessLoginResponse, Payload, Key, never, ProcessLoginResponse> & { …; }) | undefined): Promise<…>’, gave the following error. Argument of type ‘{ email: string; password: string; }’ is not assignable to parameter of type ‘null | undefined’.

Overload 3 of 3, ‘(extraArgument?: null | undefined, options?: (SWRMutationConfiguration<ProcessLoginResponse, Payload, Key, never, ProcessLoginResponse> & { …; }) | undefined): Promise<…>’, gave the following error. Argument of type ‘{ email: string; password: string; }’ is not assignable to parameter of type ‘null | undefined’.

Here is the code

useLogin.tsx

import useSWRMutation from 'swr/mutation'

import { httpClient } from '@/Libraries/httpClient'

type Payload = {
  email: string
  password: string
}

type ProcessLoginResponse = {
  result: 'OK'
  login_token?: string
  error_code?: number
  description?: string
}

const path = '/mobile_api/viewer/account/login'

const attemptLogin = async (path: string, { arg }: { arg: Payload }) => {
  const response = await httpClient.post<ProcessLoginResponse>(path, arg)
  return response.data
}

export const useLogin = () => {
  const { trigger, data, error, isMutating } = useSWRMutation<
    ProcessLoginResponse,
    Payload
  >(path, attemptLogin)

  return {
    triggerLogin: trigger,
    data,
    error,
    isMutating,
  }
}

Form.tsx

import React, { ChangeEvent, FC } from 'react'

import { Link, useForm } from '@inertiajs/react'

import { useLogin } from '../Hooks/useLogin'

import { Button } from '@/Features/Viewer/Login/Components/Button'
import InputField from '@/Features/Viewer/Login/Components/InputField'

const Form: FC = () => {
  const { triggerLogin, isMutating } = useLogin()
  const { data: formData, setData } = useForm({
    email: '',
    password: '',
  })

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setData({ ...formData, [name]: value })
  }

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    triggerLogin(formData)
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col">
      <div className="flex flex-col mb-2">
        <InputField
          id="email"
          name="email"
          type="text"
          value={formData.email}
          onChange={handleChange}
          placeholder="パスワード"
          label="半角英数字を入力してください"
        />
        <InputField
          id="password"
          name="password"
          type="password"
          value={formData.password}
          onChange={handleChange}
          placeholder="パスワード"
          label="4〜12文字の半角英数字を入力してください"
        />
      </div>
      <Button bgColor="bg-[#76cccd]" disabled={isMutating}>
        ログイン
      </Button>
      <Link className="mt-4 mb-8 text-center text-[#42BFC0] font-bold" href="/">
        パスワードをお忘れの場合
      </Link>
    </form>
  )
}

export default Form

I tried solution from Copilot and ChatGPT but then the issue will move to other function used.