Let's say your reusable component is named FormInput

The component definition should look like this:

const FormInput = (props: any) => {
  const [value, setValue] = useState(props.value);
  useEffect(() => {
    setValue(props.value);
  }, [props.value])

  return ( 
    <input
       autoComplete={props.autoComplete}
       name={props.name}
       type={props.type}
       id={props.id} 
       value={props.value}
       data-index={props.index} 
       onChange={props.onChange} 
       disabled={props.disabled}
       ariaLabelledBy={props.ariaLabelledBy} 
       required={props.required}/>
  )
};

And in the page where you want to use it you can simply invoke the component pass all the props to the component and implement the onChange event handler on the page:

Let's say you want to invoke the Input component on Login page:

const LoginPage = (props: any) => {
    ... // you have some useEffect etc. that is related to the business logic of the page

    const handleChange = (event: any) => {
      // put your logic here
    }

   return (
        ... // other HTML elements/components

       <FormInput type="text" onChange={handleChange} id="test" value="John Doe" ... />
   )
};