Obtendo valores dos inputs com e sem onChange

Oi. Vi todas as aulas e decidi criar um site react que serve para cadastrar livros. O App.js é composto de um Menu que é uma lista de itens. De acordo com o item clicado, é exibido o componente Biblioteca, que mostra os livros cadastrados, ou o componente Cadastro, que cadastra um livro a ser exibido na Biblioteca. Vou estar apresentado aqui o componente Cadastro. Eu fiz duas versões. A primeira (submterA), que é mais intuitiva para mim, quando form é submetido, simplesmente cria um objeto com os dados do livro e via props passa esse objeto para o App.js que preenche o vetor de livros com o novo livro recebido:

const Cadastro = (props) => {

  const submter = (evento) => {
    evento.preventDefault();

  const livro = {
      titulo: evento.target[0].value,
  resumo: evento.target[1].value,
  autores: evento.target[2].value,
};
props.getLivros(livro);
  };

  return (
<div>
  <form onSubmit={submter}>
    <label> Título </label>
    <br />
    <input type="text" name="titulo" />
    <br />
    <label> Resumo </label>
    <br />
    <input type="text" name="resumo" />
    <br />
    <label> Autores </label>
    <br />
    <input type="text" name="autores" />
    <br />
    <button> enviar </button>
  </form>
</div>
  );
};

export default Cadastro;

Isso funciona, pois todos os livros cadastrados aparecem na Biblioteca. E quando o usuário muda o texto do input, ele aparece normalmente na tela, indicando que o componente React está sendo redesenhado, certo?

Na segunda forma usei estado, onde as variáveis associadas a cada input são alteradas através do evento onChange. Fiz um teste sem a propriedade value em cada input, e os textos do usuário são desenhados normalmente, o que indica que o componente React está sendo redesenhado também, certo? E os livros cadastrados aparecem na Biblioteca também.

Bom, gostaria de perguntar primeiramente, qual a efetiva diferença entre a versão 1 e 2 para castrar os livros? Pois, ambas funcionam e a segunda, que é orientada da forma como o professor fez na aula, é menos intuitiva (sou novo em React) e quis, por questões de aprendizado, verificar se a minha ideia inicial era válida e funcionava.

Segundo, é necessário (ou obrigatório) usar o a propriedade value nos inputs? Pois, sem eles também funcionou na segunda versão. Algum problema pode ocorrer futuramente se não usarmos ela?

Na terceira versão, que é uma extensão da segunda, eu usei a propriedade value e se retirarmos o onChange, não importa o que o usuário digite, os inputs não mudam mais. Mantendo o onChange, as coisas funcionam normalmente, e os textos são redesenhados. Segue a terceira versão:

import React from "react";

const Cadastro = (props) => {
  const [titulo, setTitulo] = React.useState("");
  const [resumo, setResumo] = React.useState("");
  const [autores, setAutores] = React.useState("");

  const onCadastrarTitulo = (event) => {
setTitulo(event.target.value);
  };

  const onCadastrarResumo = (event) => {
setResumo(event.target.value);
  };

  const onCadastrarAutores = (event) => {
setAutores(event.target.value);
  };

  const submter = (evento) => {
evento.preventDefault();
   const livro = {
  titulo,
  resumo,
  autores,
};

props.getLivros(livro);
  };

  return (
<div>
  <form onSubmit={submter}>
    <label> Título </label>
    <br />
    <input
      type="text"
      name="titulo"
      onChange={onCadastrarTitulo}
      value={titulo}
    />
    <br />
    <label> Resumo </label>
    <br />
    <input type="text" name="resumo" value={resumo} />
    <br />
    <label> Autores </label>
    <br />
    <input
      type="text"
      name="autores"
      onChange={onCadastrarAutores}
      value={autores}
    />
    <br />
    <button> enviar </button>
  </form>
</div>
  );
};

export default Cadastro;

Entendo, de acordo com as aulas, que a terceira versão é a forma profissional de desenvolver em React (usando apenas javascript).

Mas esta tudo bem eu usar a primeira versão?

Obrigado pela atenção!