我想通过Nodemailer，TypeScript和NextJS发送邮件。状态组件的contact.tsx文件中有一个错误。如何修复错误？使用setform可能会导致表单状态错误。我是打字脚本的初学者，无法找到任何解决方案。如果有人能解决这个问题，我会非常感激。
contact.tsx文件用于页面。

import React, { useState } from 'react';
export default function Contact() {

  const [inputs, setInputs] = useState({
    fname: '',
    lname: '',
    email: '',
    message: ''
  });

  const [form, setForm] = useState('')
  const handleChange = (e) => {
        setInputs((prev) => ({
            ...prev,
            [e.target.id]: e.target.value,
        }))
    }

  const onSubmitForm = async (e) => {
        e.preventDefault()

        if (inputs.fname && inputs.email && inputs.phone && inputs.message) {
            setForm({ state: 'loading' })
            try {
                const res = await fetch(`api/contact`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(inputs),
                })

                const { error } = await res.json()

                if (error) {
                    setForm({
                        state: 'error',
                        message: error,
                    })
                    return
                }

                setForm({
                    state: 'success',
                    message: 'Your message was sent successfully.',
                })
                setInputs({
                    fname: '',
                    lname: '',
                    email: '',
                    message: '',
                })
            } catch (error) {
                setForm({
                    state: 'error',
                    message: 'Something went wrong',
                })
            }
        }
  }

  return (
    <form onSubmit={(e) => onSubmitForm(e)}>
        <input
        type="text"
        id="fname"
        value={inputs.fname}
        onChange={handleChange}
        className="form-control"
        placeholder="First Name"
        required
        />

        <input
        type="text"
        id="lname"
        value={inputs.fname}
        onChange={handleChange}
        className="form-control"
        placeholder="Last Name"
        required
        />

        <input
        type="email"
        id="email"
        value={inputs.email}
        onChange={handleChange}
        className="form-control"
        placeholder="Email"
        required
        />

        <textarea
        id="message"
        value={inputs.message}
        onChange={handleChange}
        rows={4}
        className="form-control"
        placeholder="Messages"
        required
        ></textarea>

        <button
        type="submit"
        className="button"
        >
        Send inquiry
        </button>
        {form.state === 'loading' ? (
        <div>Sending....</div>
        ) : form.state === 'error' ? (
        <div>{form.message}</div>
        ) : (
        form.state === 'success' && <div>Sent successfully</div>
        )}
    </form>
  );
}