Get the values of two fields in my form as I try to log in?

I am trying to make my Log In page work. I have tons of problemas to make it work, and I want you to help me.

The first problem is that I cannot get the values of the input generated by the user. I mean the Username and Password fields do not work. When I go to console in the Google Development tools I get an undified value insted of the value that I have typed in the Log in page.

This is the code for my Login.js file:

import React, {useState} from 'react'
import "./Login.css"
import linkedin1 from './linkedin1.png';
import { Link } from "react-router-dom";
import Signin from "./Signin";

function Login() {
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();

  const doit = (e) => {
    e.preventDefault();
  }

  return (
    <div className='login'>
      <img src={linkedin1} />
      <form> 
        <input value={email} id="myemail" onChange={(e => setEmail(e.target.value))} placeholder='Enter Email' type="email" />
        <input value={password} onChange={(e => setPassword(e.target.value))} placeholder='Enter password' type="password" />
        <button onClick={doit} type='submit' >
          Sign In
        </button>
      </form> 
    </div>
  )
}

export default Login

I tried to get the value of my input fieds, that is the username field and the password field. I tried to get those values but I just keep getting an Undefined value from the console at the Google development tools.