States returned from custom hook undfined - reactjs

Question

State returned from custom hook is undefined. Why is it undefined I do not understand, in the form below I am trying to get states from the custom useInput hook but they are undefined, what is the problem here?
Custom hook
import {useState} from 'react';
export default function useInput (checkValidity){
const [value,setValue] = useState('');
const[isTouched,setIstouched]= useState(false);
let isThisInValid = !checkValidity(value) && isTouched;
var changeValidity = (event)=>{
setValue(event.target.value);
}
var submitTheValue = (event)=>{
event.preventDefault();
setIstouched(true);
}
return {
isThisInValid :isThisInValid,
changeValidity:changeValidity,
submitTheValue:submitTheValue,
}
}
Form in which i am trying to get value from custom hook
import React from 'react'
import Button from '../Button/Button.js'
import {useState,useRef} from 'react'
import Style from '../Input.module.css'
import useInput from '../hooks/useInput'
function BasicInput (props){
const {validityofInput, //trying to get state from custom hook
changeInputValidity,
submitTheValue,
}
= useInput((value) => value.trim()=='');
const {validityofEmail,
changeEmailValidity,
submitTheSecondValue,
}
= useInput((value) => value.includes('#'));
console.log(validityofEmail) //undefined
console.log(validityofInput) //undefined
return <>
<form className = {Style.form}
onSubmit = {submitTheValue}
noValidate
>
<div>Name</div>
<input
id="input"
className = { validityofInput && Style.wrong}
onChange = {
changeInputValidity
}/>
<div>Email</div>
<input
type = "email"
id="input"
className = {validityofEmail && Style.wrong}
onChange = {
changeEmailValidity
}/>
<Button name = "CLICK ME"> </Button>
</form>
</>
}
export default BasicInput;

Answer 1

You are returning an object in the hook with these properties:
return {
isThisInValid :isThisInValid,
changeValidity:changeValidity,
submitTheValue:submitTheValue,
}
and you are destructing from the hook these properties:
const {validityofInput, // notice here it must be "isThisInValid"
changeInputValidity, // and here must be "changeValidity"
submitTheValue,
}
You can rename the properties like this if you want:
const {isThisInValid: validityofInput,
changeValidity:changeInputValidity,
submitTheValue,
}