Put form validation errors (JSON response from server) into React form state

Question

I want to put the errors returned from making an axios API call, to the React state. Here is the React component.

export const formDataObject = yup.object({
    name: yup.string()
        .max(32, "No more than 32 characters for category name")
        .required("The category name is required")
});

const NewCategory = () => {
    const navigate = useNavigate();
    const [errors, setErrors] = useState([]);
    const [data, setData] = useState({
        name: ""
    });

    const changeValue = (field, val) => {
        const newData = { ...data };
        newData[field] = val;
        setData(newData);
    };

    const validateSubmit = (e) => { 
        e.preventDefault();

        formDataObject
            .validate(data, { abortEarly: false })
            .then((responseData) => {
                setErrors([]);

                axios.post("http://bigblog.com/api/v1/categories/store", {
                    id: null,
                    name: data.name
                })
                .then(function(response) {
                    alert("Success! New Category Added");
                    navigate("/dashboard/categories", {replace: true});
                })
                .catch(function(err) { 
                    console.log(err.response.data.errors);
                });
            })
            .catch((err) => { 
                setErrors(err.errors);
            });
    };

    return (
        <>
            <h5 className="card-title">Categories :: New Category</h5>
            <div>
                <Link className="btn btn-outline-dark btn-md w-25" role="button" to="/dashboard/categories">Categories</Link>
            </div>

            <hr />
            <div className="container">
                <div className="row">
                    <div className="col-lg-8">
            
                        <form onSubmit={validateSubmit}>
                            <div className="form-group">
                                <label htmlFor="name">Name</label>
                                <input
                                    id="name"
                                    type="text"
                                    name="name"
                                    value={data.name ?? ""}
                                    className="form-control form-control-lg"
                                    placeholder="Enter a new category name"
                                    onChange={(e) => changeValue("name", e.target.value)}
                                />
                            </div>

                            <div className="form-group form-check">
                                <input 
                                    className="form-check-input" 
                                    type="checkbox" 
                                    value="" 
                                    id="active" 
                                />
                                <label htmlFor="active">Active, yes or no?</label>
                            </div>

                            <button className="btn btn-outline-dark w-25" type="submit">Go</button>
                        </form>

                    </div>
                    <div className="col-lg-4">
            
                        {errors.map((err) => {
                            return (
                                <div className="text-danger" key={err}>{err}</div>
                            );
                        })}
           
                    </div>
                </div>
            </div>
            <hr />
        </>
    );  
};

export default NewCategory;

I want the err.response.data.errors put into the setErrors([]) form state, so the form is rendered with the errors like how pre submitted errors are displayed on the client side. So, what do I need inside the catch block?