Two input for adding multiple object in an array

[skyworth01]

serviceProducts: yup
  .array()
  .of(
    yup.object({
      productId: yup.number().required("This field is required"),
      unitsRequired: yup.number().required("This field is required"),
    })
  )
  .required("This field is required")
  
  I have a schema like this using yup
  
  I only want to have two input elements for productId,unitsRequired and  add button
  
  when i enter some value in the two inputs and click on add, i want to show a card which shows these data.
  
  There will be multiple cards like this if i enter more data
  
  Final object should be like this
  
  serviceProducts:[
         {productId:2,unitsRequired:2},
         {productId:3,unitsRequired:4},
         {productId:6,unitsRequired:5}
  ]
  
  
  How can i do this using react-hook-form?Can i do this using useFieldArray?
  I dont want to create multiple input fields when i click on add.