Не обновляется state через hook useState c первого раза

Состояние обновляется только в следующие нажатие клавиши но с предыдущем состоянием. Скрин 1

При нажати на updateForm() тоже пусто только посе второго нажатия состояние обновляется. Скрин 2

Я понимаю что это связанно с ассинхронностью, но в данном случае я не знаю как его использовать.

Home.jsx

import React, { useState } from 'react';
import { Form } from '../components/Form/Form';

const Home = () => {
  const [dateForm, setDataForm] = useState({});

  const updateForm = eachEnry => {
    setDataForm(eachEnry);
    console.log(dateForm);
  };

  return (
    <div>
      <Form updateForm={updateForm} />
    </div>
  );
};
export default Home;

Form.jsx

import React, { useState } from 'react';
import './Form.scss';

export const Form = ({ updateForm }) => {
  const initInputState = {
    name: '',
    password: ''
  };
  const [dataForm, setDataForm] = useState(initInputState);
  const { name, password } = dataForm;

  const onChange = e => {
    setDataForm({
      ...dataForm,
      [e.target.name]: e.target.value
    });
  };

  const onSubmit = e => {
    e.preventDefault();
    updateForm(dataForm);
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={onChange}
          name="name"
        />
        <input
          placeholder="Password"
          onChange={onChange}
          value={password}
          type="text"
          name="password"
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
};