setState no se actualiza con react-hook-form

Amig@s, estoy tratando de implementar react-hook-form a mi aplicación pero estoy teniendo un inconveniente al querer actualizar el state, ya que al momento de dar click en el submit los valores de los inputs efectivamente llegan a la function, pero cuando trato de pasar esos valores a un const [values, setValues] = useState({}) este no se actualiza, y más extraño aun es que si vuelvo a hacer click en el submit si lo hace como debería.

Les adjunto el código y el codesandbox para que puedan replicarlo

import React, { useState } from "react";
import { useForm } from "react-hook-form";

import "./styles.css";

export default function App() {
  const { register, errors, handleSubmit } = useForm();
  const [values, setValues] = useState({});

  const onSubmit = (data, event) => {
    alert(JSON.stringify(data));
    console.log(`before set -> ${JSON.stringify(values)}`);
    setValues(data);
    console.log(`after set -> ${JSON.stringify(values)}`);
  };

  return (
    <React.Fragment>
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <input
          type="text"
          name="user"
          ref={register({
            required: { value: true, message: "El campo no puede estar vacio" }
          })}
        />
        <span>{errors?.user?.message}</span>
        <br />
        <input
          type="password"
          name="pass"
          ref={register({
            required: { value: true, message: "El campo no puede estar vacio" }
          })}
        />
        <span>{errors?.pass?.message}</span>
        <br />
        <button type="submit">Guardar</button>
      </form>
    </React.Fragment>
  );
}

Ignoro si estoy abordando mal el problema o al utilizar este package, la forma de trabajar con hooks cambia un poco.

Como siempre, cualquier orientación la agradezco!