Diferença entre useRef vs document.getElementById para focar uma entrada

Estou seguindo um tutorial do React e atualmente tenho este código React:

import { useRef } from 'react';

const AddItem = ({ newItem, setNewItem, handleSubmit }) => {
    const inputRef = useRef();

    return (
        <form className="addForm" onSubmit={handleSubmit}>
            <input
                ref={inputRef}
                id="addItem"
                type="text"
                value={newItem}
                onChange={(e) => setNewItem(e.target.value)}
            />
            <button
                type="submit"
                onClick={() => inputRef.current.focus()}
                // onClick={() => document.getElementById('addItem').focus()} // What does this do differently?
            >
            </button>
        </form>
    );
};

export default AddItem;

Estou usando useRef()junto com onClick={() => inputRef.current.focus()}para garantir que a entrada de texto esteja focada depois de clicar no botão.

Posso fazer a mesma coisa sem precisar do useRefgancho usando onClick={() => document.getElementById('addItem').focus()}.

Existe algum benefício em usar o useRefmétodo em vez do getElementByIdmétodo anterior?