React Hook Form handle server error & set previous values to form fields

react-hook-form.js

//React Hook Form  - handle server error

import { useForm } from "react-hook-form";
import { useMutation } from "react-query";
import axios from "axios";

const Login = () => {
  const [userData, setUserData] = useState({});

  const { register, handleSubmit, errors, setError } = useForm();

  const mutation = useMutation(async (data) => {
    //console.log(data);

    try {
      const response = await axios.post(
        "- API URL -",
        { login: data.uname, password: data.psw }
      );
      //console.log(response);
    } catch (err) {
      setError("uname", {
        type: "server",
        message: "UName Error",
      });
      console.log(err.response);
    }
  });

  const onSubmit = (data) => {
    mutation.mutate(data);
  };

  console.log("errors", errors);
  return (
    <div class="container">
      <form onSubmit={handleSubmit(onSubmit)}>
        <label for="uname">
          <b>Username</b>
        </label>
        <input
          type="text"
          placeholder="Enter Username"
          name="uname"
          ref={register}
        />
        <label for="psw">
          <b>Password</b>
        </label>
        <input
          type="password"
          placeholder="Enter Password"
          name="psw"
          ref={register}
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

export default Login;

react-hook-form2.js

//React Hook Form  - set previous values to form fields

import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useMutation } from "react-query";
import axios from "axios";

const PostEdit = () => {

  const { register, handleSubmit, errors, setError, setValue } = useForm();

   const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )

  useEffect(() => {
    if (Object.keys(data).length) {
      setValue("name", data.name);
      setValue("description", data.description);
    }
  }, [data]);

  return (
    <div class="container">
      <form>
        <label for="name">
          <b>Name</b>
        </label>
        <input
          type="text"
          placeholder="Enter Name"
          name="name"
          ref={register}
        />
        <label for="description">
          <b>Description</b>
        </label>
        <input
          type="text"
          placeholder="Enter Description"
          name="description"
          ref={register}
        />
        <button type="submit">Update</button>
      </form>
    </div>
  );
};

export default PostEdit;