index.jsx

const SomeComponent = () => {
  const { fields, success, errors, handleSubmit, setFields } =
    useFormValidationHook(formData)

  return (
    <div className="Form" css={CSS}>
      <Form onSubmit={handleSubmit}>
        {fields.map((field) => (
          <FormGroup key={field.name}>
            <Form.Label>{field.name}</Form.Label>

            <Form.Control
              className={errors[field.name] ? 'outline-error' : ''}
              type={field.type}
              as={field.type === 'textarea' ? 'textarea' : 'input'}
              name={field.name}
              value={field.value}
              onChange={setFields}
              placeholder={field.placeholder}
            />

            <div className="error-message">{errors[field.name] || ''}</div>
          </FormGroup>
        ))}

        <p className="success">{success}</p>

        <div className="submit-button">
          <Button variant="info" type="submit">
            Submit
          </Button>
        </div>
      </Form>
    </div>
  )
}