“Objects are not valid as a React child” in Object destructuring

I’m having a React Error #31 which describes as “Objects are not valid as a React child.”

The problem is I’m trying to do Object Destructuring for Form Validations as follows, so I’m trying to figure out the best way to solve this (unless refactoring everything to arrays?).

import { useReducer } from 'react';

const initialInputState = {
    value: '',
    isTouched: false,
};

const inputStateReducer = (state, action) => {
    if (action.type === 'INPUT') {
      return { value: action.value, isTouched: state.isTouched };
    }
    if (action.type === 'BLUR') {
      return { isTouched: true, value: state.value };
    }
    if (action.type === 'RESET') {
      return { isTouched: false, value: '' };
    }
    return inputStateReducer;
  };

const useInput = (validateValue) => {
  const [inputState, dispatch] = useReducer(inputStateReducer, initialInputState);

    const valueIsValid = true;
    const hasError = !valueIsValid && inputState.isTouched;

    const valueChangeHandler = (event) => {
        dispatch({ type: 'INPUT', value: event.target.value });
    }

    const inputBlurHandler = (event) => {
        dispatch({ type: 'BLUR' });
    }

    const reset = () => {
        dispatch({ type: 'RESET' });
    }

    return {
        value: inputState.value,
        isValid: valueIsValid,
        hasError,
        valueChangeHandler,
        inputBlurHandler,
        reset,
    }
}

export default useInput;

import useInput from "../hooks/use-input";
import { useState } from 'react';


export default function InterestForms({ photoSet, onInterestLightboxChange, interestLightboxContent }) {

    const alphabetOnly = (value) => /^[a-zA-Z() ]+$/.test(value);
    
    const [isFormSubmitted, setFormSubmitted] = useState(false);

    // Calling useInput and expect values in object destructuring.
    // However, it seems this is causing React Error #31 since it expect values to be in different format 
    const {
        value: nameValue,
        isValid: nameIsValid,
        hasError: nameHasError,
        valueChangeHandler: nameChangeHandler,
        inputBlurHandler: nameBlurHandler,
        reset: resetName,
    } = useInput(alphabetOnly);



...

Refactoring this to arrays might solve the problem. But I want to see if there’s a better solution (or if I just missed something simple).