Como retornar o conteúdo de uma caixa de texto em React usando a função useRef() para acessar os elementos HTML

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

// função App() que será exportada
export default function App() {
  // vamos criar uma referência para a caixa
  // de texto. Veja que esta referência será
  // usada na declaração do elemento input type text
  const txtNome = useRef(null);

  // vamos usar um estado para guardarmos o conteúdo
  // da caixa de texto
  const [nomeAtualizado, setNomeAtualizado] = useState('');

  // aqui nós gerenciamos o evento onClick do botão
  const tratarEventoClick = () => {
    // vamos obter o conteúdo da caixa de texto
    // usando "txtNome.current.value"
    setNomeAtualizado(txtNome.current.value);
  };

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

      <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>
);