I have a question about some weird behavior when using React state.

If I change the default type of the groupedFormErrors variable in the helper function to [] instead of {} the state in the page element formErrors doesn't update. Would be great if somebody could explain why this happens.

Page element

const [formErrors, setFormErrors] = useState();

const signUpHandler = async (e) => {
    e.preventDefault();
    const response = await submitForm();
    if (response.status === 422) {
        setFormErrors(groupFormErrors(response));
    }
};

Helper function

export default function GroupFormErrors(response) {
    let groupedFormErrors = {}; // <<<<<<<<<<<<<<<<<<<<< This here
    if (response.status === 422) {
        response.data.forEach((error) => {
            if (groupedFormErrors.hasOwnProperty(error.param)) {
                groupedFormErrors[error.param].push(error.msg);
            } else {
                groupedFormErrors[error.param] = [];
                groupedFormErrors[error.param].push(error.msg);
            }
        });
    }
    return groupedFormErrors;
}