React JS

5)Form with Multiple Inputs
You have 5 input fields (name, email, phone, city, password).
Better to use:
5 separate useState?
OR one object state?
Why?
What problem happens if you update object state incorrectly?

MultipleInput.jsx

import { useState } from "react"
function MultipleInput(){
    const [file,setFile]=useState({
        name:'',
        mail:'',
        phone:'',
        city:'',
        password:''
    })
    const [ show,setShow]=useState(false)

    function form(e){
        setFile({...file,[e.target.name]:e.target.value})
    }
    function submit(){
        setShow(true)    
    }
    return(
        <div>
            <input type='text' placeholder="enter a name" onChange={form} value={file.name} name='name'></input><br></br>
            <input type='email' placeholder="enter a mail" onChange={form} value={file.mail} name='mail'></input><br></br>
            <input type='text' placeholder="enter a phone" onChange={form} value={file.phone} name='phone'></input><br></br>
            <input type='text' placeholder="enter your city" onChange={form} value={file.city} name='city'></input><br></br>
            <input type='password'placeholder="enter a password" onChange={form} value={file.password} name='password'></input><br></br>
            <button onClick={submit}>submit</button><br></br>Details
            {show && 
            <>
            <p>Name:{file.name}</p>
            <p>Email:{file.mail}</p>
            <p>Phone:{file.phone}</p>
            <p>City:{file.city}</p>
            <p>Password:{file.password}</p>
            </>
            }   
        </div>
    )
}

export default MultipleInput;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import Input from './Input'


function App() {

  return (
    <Input/>
  )
}

export default App;