simple reactive and flexible react form

Form.js

import React from 'react'
import useFetch from '../hooks/useFetch'

const formFields = [
  {
    id: 'nome',
    label: 'Nome',
    type: 'text'
  },
  {
    id: 'email',
    label: 'Email',
    type: 'email'
  },
  {
    id: 'senha',
    label: 'Senha',
    type: 'password'
  },
  {
    id: 'cep',
    label: 'CEP',
    type: 'text'
  },
  {
    id: 'rua',
    label: 'Rua',
    type: 'text'
  },
  {
    id: 'numero',
    label: 'Numero',
    type: 'text'
  },
  {
    id: 'bairro',
    label: 'Bairro',
    type: 'text'
  },
  {
    id: 'cidade',
    label: 'Cidade',
    type: 'text'
  },
  {
    id: 'estado',
    label: 'Estado',
    type: 'text'
  }
]

const Form = () => {
  const { request } = useFetch()
  const [form, setForm] = React.useState(
    formFields.reduce((acumulator, field) => {
      return {
        ...acumulator,
        [field.id]: ''
      }
    }, {})
  )

  async function fetchData() {
    const { response } = await request(
      'https://ranekapi.origamid.dev/json/api/usuario',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(form)
      }
    )
    if (response.status === 200) alert('Cadastro realizado com sucesso!')
    console.log(response)
  }

  function handleChange({ target }) {
    const { id, value } = target
    setForm({ ...form, [id]: value })
  }

  function handleSubmit(event) {
    event.preventDefault()
    fetchData()
  }

  return (
    <form onSubmit={handleSubmit}>
      {formFields.map(({ id, label, type }) => {
        return (
          <div key={id}>
            <label htmlFor={id}>{label}</label>
            <input
              onChange={handleChange}
              type={type}
              id={id}
              value={form[id]}
              autoComplete='no'
            />
          </div>
        )
      })}

      <button>Cadastrar</button>
    </form>
  )
}

export default Form