Generic form handler to update the state

form-helper.tsx

    type NonArrayFunctionKeys<T> = {
        [K in keyof T]-?: T[K] extends Function | unknown[] ? never : K
    }[keyof T];
    const handleInputChange = <TKey extends NonArrayFunctionKeys<User>, TValue>(
        value: TValue,
        name: TKey,
        // setStateCallback: React.Dispatch<React.SetStateAction<User>>
    ) => setProfile((prev) => ({...prev, [name]: value}));

    type KeysMatching<T, V> = { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T];
    const handleArrayChanged = <TKey extends KeysMatching<User, unknown[]>, TValue extends string>(
        value: TValue,
        name: TKey,
        // setStateCallback: React.Dispatch<React.SetStateAction<User>>
    ) => {
        setProfile((preProfile) => {
            const updated = {...preProfile};
            if (Array.isArray(updated[name]) && updated[name].includes(value)) {
                updated[name] = updated[name].filter((item) => item !== value);
            } else {
                updated[name] = [...(updated[name] ?? []), value];
            }
            return updated;
        });
    };