Como retornar o texto digitado em uma caixa de texto em React usando useState()

// vamos importar o useState
import {useState} from 'react';

// função App() que será exportada
export default function App() {
  // vamos criar dois states e suas funções
  // correspondentes
  const [nome, setNome] = useState('');
  const [nomeAtualizado, setNomeAtualizado] = useState(nome);

  // aqui nós gerenciamos o evento onChange da caixa
  // de texto
  const tratarEventoChange = (event) => {
    // e chamamos a função que atualiza o estado nome
    setNome(event.target.value);
  };

  // aqui nós gerenciamos o evento onClick do botão
  const tratarEventoClick = () => {
    // aqui nós transferimos o valor do estado
    // nome para o estado nomeAtualizado
    setNomeAtualizado(nome);
  };

  // e retornamos para renderização
  return (
    <div>
      <input type="text"
        id="nome" name="nome"
        onChange={tratarEventoChange}
        value={nome}/>

      <h2>Nome Informado: {nome}</h2>

      <h2>Nome Atualizado: {nomeAtualizado}</h2>

      <button onClick={tratarEventoClick}>
	 Atualizar Estado</button>
    </div>
  );
}

// vamos fazer os imports necessários
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

// definimos a raiz da aplicação React
const root = ReactDOM.createRoot(
  document.getElementById('root'));

// e renderizamos a aplicação no navegador
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);