Странное поведение state при отслеживании события

Есть компонент:

import React, { useState } from 'react';

function Login() {
    const [hand, setHand] = useState('Загрузка...');
    const [type, setType] = useState('log');
    function submitHandler(ev) {
        ev.preventDefault();
        ev.stopPropagation();
        if (typeof type !== 'string') {
            return setHand('Произошла ошибка');
        }
        console.log(`type="${type}"`);
    }      
    return (
        <form onSubmit={submitHandler} className="login"}>
            <div className="buttons">
                <button
                    type="submit"
                    className="button-styled reg"
                >
                    Зарегистрироваться
                </button>
                <button
                    onClick={() => setType('reg')}
                    type="submit"
                    className="button-styled log"
                >
                    Войти
                </button>
                <button
                    onClick={() => setType('log')}
                    type="reset"
                    className="button-styled"
                >
                    Сбросить
                </button>
            </div>
        </form>
    );
}

export default Login;

При на кнопки я переопределяю type и в функции, передаваемой коллбеком (submitHandler) в onSubmit формы консолю. Но консолится оно странно: в случае нажатия на Зарегистрироваться всегда выводится log, пока не нажимаю на Войти, тогда выводится reg и во все последующие разы вне зависимости от кнопки.

Пробовал переписать функцию так:

function submitHandler() {
  return function(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    if (typeof type !== 'string') {
      return setHand('Произошла ошибка');
    }
    console.log(`type="${type}"`);
  }
}

И уже не передавать, а вызывать submitHandler в onSubmit, но тогда почему-то не работает ev.preventDefault().