Usestate has initial value of [Object, object]

The value of use State when put into the input value comes out to [Object, object] but in dev tools, it is shown empty.

 import { useState } from 'react'
import {Link} from 'react-router-dom'

function Login() {

  const [input, setInput] = useState({
    email: ' ',
    password: ' '
  })
 
  return (
    <>
    <form className="form-group">
      <div className="input-group">
        <label htmlFor="email">Email</label>
        <input type="text" id= 'email' name = 'email' className="form-input" value={input} />
      </div>
      <div className="input-group">
        <label htmlFor="password">Password</label>
        <input type="text" id='password' name='password' className="form-input" value={input}/>
      </div>
      <p>Don't have an Account? <Link>SignUp</Link> </p>
        <button className='btn'>LogIn</button>
    </form>
</>
  )
}

export default Login

I cant even use any function.

>Solution :

The value of use State when put into the input value comes out to [Object, object]

This is because you need to access the object correctly. Instead of value={input}, you need to use value={input.email}, and similarly for password value={input.password}

<input type="text" id= 'email' name = 'email' className="form-input" value={input.email} />

useState() sets the default state, and you have specified the default state as an empty string ”, that’s the reason the initial value will always be empty. You can assign something to check like

const [input, setInput] = useState({
    email: 'test_email',
    password: '******'
})