I was just learning about custom hook and came across this really interesting syntax and a custom useInput hook.

Below is the useInput hook

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
};

and Below is the image of how the custom hook is applied

User have defined requestUrl as a custom useInput hook but they just applied some magic to the input element like {...requestUrl}

How does exactly work?? Shouldn't the input field have an event listener to handle input field change?

This is whole new magic to me, would appreciate tons if anybody could give me some resource or keyword to search for.

Appreciate tons everyone!