How do I use the hook for a field that's dynamically updated before submitting?

[avdb13]

I have an uncontrolled textfield (material-ui) with a button that takes an array of strings. However, I'm not sure how to use react-hook-form for this case.

const AddDiagnosisForm = () = > {
  const methods = useForm();

  const[diagnosisCodes, setDiagnosisCodes] = useState<string[]>([]);
  const diagnosisCode = useRef<HTMLInputElement>(null);

  const addDiagnosisCode = (e : React.SyntheticEvent) = > {
    e.preventDefault();

    if (diagnosisCode.current) {
      console.log(diagnosisCode.current.value);
      setDiagnosisCodes([... diagnosisCodes, diagnosisCode.current.value ]);
      diagnosisCode.current.value = "";
    }
  };
  return (
      <div>
        <TextField label = "DiagnosisCode" fullWidth inputRef = {diagnosisCode} />
        <Button color = "secondary" variant = "contained" type =
           "button" onClick = {addDiagnosisCode}> +
        </ Button>);
        <Typography variant="h6">{diagnosisCodes.join(", ")}</Typography>
      </div>
};