Form data doesn't fill in React

Question

I have a very basic project with next js in this project i have a simple form . when I submit this form i put my data in form Data with append method and after that when i log my form data in console it is an empty object and i'm so wondering why this is happened this is my code

import styles from '../styles/Home.module.css'
import {useState} from "react";

export default function Home() {
    const [inputs, setInputs] = useState({
        name: '',
        mobile: ''
    });
    const changeHandler = (e) => {
        setInputs(prev => {
            const cloneState = {...prev};
            cloneState[e.target.name] = e.target.value;
            return cloneState;
        });
    }

    const clickHandler = (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('name', inputs.name);
        formData.append('mobile', inputs.mobile);
        console.log(formData, 'FD');
    }
    return (
        <div className={styles.container}>
            <form>
                <input type="text" onChange={changeHandler} name='name'/>
                <input type="text" onChange={changeHandler} name='mobile'/>
                <button type='submit' onClick={clickHandler}>Submit</button>
            </form>
        </div>
    )
}

thanks all of you in advanced

Answer 1

If you log the formData object in console it will log the formData object. You need to call the 'get' method to get the values. If you want to get a json from a formData object use the code below.

console.log(Object.fromEntries(formData))