I try to update the values of a form, for this, I use a react hook form. When it is rendered first it shows the default value which was given previously. It works fine whenever I tried to change all the values. But when I only change a specific field it removes all other value from the element, and only update this field. enter image description here I want to update only specific fields without changing the previous value How can I do that?

const onSubmit = (data) => {
  axios.put(`http://localhost:4000/users/${id}`, data)
       .then(res => console.log("success"))
}

return (
  <div>
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Team 1</label>
      <input defaultValue={match.team1} {...register("team1")} /> <br />
      <label>Team 2</label>
      <input defaultValue={match.team2} {...register("team2")} /><br />
      <input type="submit" />
    </form>
  </div>
);