Então pessoal estou com um problema, eu fiz um formalario que envia os dados do input pelo submit a uma API, porem não consigo limapr os dados aposso o submit.
    
        
    
    export default function Home() {
    
      const initialValue = {
        nome: '',
        sobrenome: '',
        email: '',
        endereco: '',
        numero: '',
        cidade: '',
        bairro: '',
        cep: '',
        numCelular: '',
        numTelefone: '',
      }
    
      const [values, setValues] = useState(initialValue);
    
      function onChange(evento) {
        const { name, value } = evento.target;
        setValues({ ...values, [name]: value })
      
    
      }
    
      function onSubmit(evento) {
        evento.preventDefault();
        /*     fetch('http://127.0.0.1:8000/clientes/')
            .then(function(res){ 
              return res.json()
            }).then(function (resConvertida){
              console.log(resConvertida)
            }) */
    
        fetch('http://127.0.0.1:8000/clientes/', {
          method: "POST",
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(values)
          
        })
          .then(response => response.json())
          .then((response) => {
            console.log(response.message);        
          })
             
      } 
    
    
      return (
        <div>
          <div>
            <Head>
              <title>Restaurante App</title>
              <meta name='description' content='App de Pedidos em Restaurantes' />
              <meta name='author' content='AgnaldoCordeiro' />
              <link rel="icon" href="/favicon.ico" />
            </Head>
          </div>
          <div>
            <Menu />
          </div>
          <div className={styles.container}>
            <Jumbotron fluid className="conteudo">
              <style>{`.conteudo{
              padding-top: 80px;
              padding-bottom: 80px;
              background-color: black;
              color: white;
              margin-bottom: 0rem !important;          
            }`}</style>
              <Container>
                <h1 className="display-3">App Restaurante</h1>
                <div className="mb-2">
                  <form className="row g-3" onSubmit={onSubmit}>
                    <div className="col-md-4">
                      <label htmlFor="inputNome" className="form-label">Nome</label>
                      <input type="text" className="form-control" id="inputNome" name="nome" onChange={onChange} />
                    </div>
                    <div className="col-md-4">
                      <label htmlFor="inputSobrenome" className="form-label">Sobrenome</label>
                      <input type="text" className="form-control" id="inputSobrenome" name="sobrenome" onChange={onChange} />
                    </div>
                    <div className="col-md-4">
                      <label htmlFor="inputCPF" className="form-label" >CPF</label>
                      <input type="text" className="form-control" id="inputCPF" name="cpf" onChange={onChange} />
                    </div>
                    <div className="col-md-3">
                      <label htmlFor="inputEmail4" className="form-label" >Email</label>
                      <input type="email" className="form-control" id="inputEmail4" name="email" onChange={onChange} />
                    </div>
                    <div className="col-md-8">
                      <label htmlFor="inputEndereco" className="form-label" >Endereço</label>
                      <input type="text" className="form-control" id="inputEndereco" name="endereco" placeholder="Apartment, studio, or floor" onChange={onChange} />
                    </div>
                    <div className="col-md-1">
                      <label htmlFor="inputNum" className="form-label" >Numero</label>
                      <input type="text" className="form-control" id="inputNum" name="numero" onChange={onChange} />
                    </div>
                    <div className="col-md-3">
                      <label htmlFor="inputCidade" className="form-label" >Cidade</label>
                      <input id="text" className="form-control" id="inputCidade" name="cidade" onChange={onChange} />
                    </div>
                    <div className="col-md-3">
                      <label htmlFor="inputBairro" className="form-label">Bairro</label>
                      <input type="text" className="form-control" id="inputBairro" name="bairro" onChange={onChange} />
                    </div>
                    <div className="col-2">
                      <label htmlFor="inputCEP" className="form-label">CEP</label>
                      <input type="text" className="form-control" id="inputCEP" name="cep" onChange={onChange} />
                    </div>
                    <div className="col-2">
                      <label htmlFor="inputCelular" className="form-label">Celular</label>
                      <input type="tel" className="form-control" id="inputnumCelular" placeholder="(DDD)00000-0000" name="numCelular" onChange={onChange} />
                    </div>
                    <div className="col-2">
                      <label htmlFor="inputTelefone" className="form-label">Telefone</label>
                      <input type="tel" className="form-control" id="inputnumTelefone" placeholder="(DDD)0000-0000" name="numTelefone" onChange={onChange} />
                    </div>
                    <div className="text-center">
                      <div className="form-check" className="align-content-center">
                        <input className="form-check-input" type="checkbox" value="" id="invalidCheck" required />
                        <label className="form-check-label" for="invalidCheck">
                          Aceite os termos e condições
                        </label>
                        <div className="invalid-feedback">
                          You must agree before submitting.
                        </div>
                      </div>
                      <div className="col-12">
                        <button type="submit" className="btn btn-primary">Cadastrar</button>
                      </div>
    
                    </div>
    
                  </form>
                </div>
    
              </Container>
              <Container className="text-center">
                <p className="lead">App de restaurante desenvolvido.</p>
                <hr className="my-2" />
                <p>Modo de Desenvolvimento.</p>
              </Container>
    
            </Jumbotron>
            <Footer />
          </div>
    
        </div>`insira o código aqui`