contribution-input.js

import React, { useState, useRef, useEffect } from 'react'
import { Box, Flex, Button, Text, Input } from 'theme-ui'
import { useFieldArray, useFormContext } from 'react-hook-form'

function ContributionInput() {
  const { trigger, control, register } = useFormContext()

  const { fields, append, remove } = useFieldArray({
    name: 'contributions',
    control
  })

  return (
    <>
      {fields.map((field, index) => {
        return (
          <div key={field.id}>
            <input
              {...register(`contributions.${index}.value`)}
              defaultValue=""
            />
            <button
              type="button"
              onClick={() => {
                remove(index)
                trigger()
              }}
            >
              Remove question {field.id}
            </button>
          </div>
        )
      })}

      <button type="button" onClick={() => append({ text: '' })}>
        Add question
      </button>
    </>
  )
}

export default ContributionInput