Olá VergilSparda, blz?
O primeiro código de exemplo tbm é um exemplo válido. Como foi mecionado na citação a abaixo o console mudando exatamente como esperado. Porém, o talvez o comportamento esperado para tela, que ao clicar em + ou - menos diminuar o valor E modifique na tela, não esteja correto.
A resposta é não, o código não vai funcionar. Mas se você rodar o código e ver o console, você vai perceber que a variável counter está mudando exatamente como esperado.
useState é um React Hook que permite adicionar uma variável de estado ao seu componente.
A convenção é nomear variáveisde estado como [algo, setAlgo] usando desestruturação de array.
No caso do exemplo foi usado um contador, para atualizar o valor em tela
const [counter, setCounter] = useState(0);
Dessa forma mencionado, quando é o usado setAlgo que é disponibilizado do Hook do React o componente faz uma atulização da tela dessa forma mostrado o novo valor em atual memória.
O state vai engatilhar a re-renderização e controlar o ciclo de vida do componente, a tal mudança de estado, comentado no item anterior (dá uma olhada no gif do item 1).
Diferente do primeiro exemplo onde o valor que aperece em tela é sempre o valor mostrado da primeira renderição do componetente. Depois que é feita operção counter = counter + 1; o valor tbm é modificando em memória, tanto que aprece correto no console.log, contudo não exite nova renderização de tela para mostra o novo valor.
Espero ter ajudo