How to use the react-hanger.useInput function in react-hanger

const DownloadModal = ({ onClose }) => {
  const email = useInput('');
  const loading = useBoolean(false);
  const clickedDownload = useBoolean(false);
  const isInputValid = email.hasValue && isemail.validate(email.value, { minDomainAtoms: 2 });
  const privacy = useBoolean(false);
  const subscribed = useBoolean(false);
  const countdown = useNumber(5);
  const step = useNumber(0);

  const onSubscribe = async () => {
    loading.setTrue();
    try {

      await subscribeUser(email.value);
      loading.setFalse();
      subscribed.setTrue();
    } catch (err) {

({
     languageList,
     allLanguages,
     supportedLanguages,
     onTranslate,
     isGoogleTranslateSetUp,
     selectedId,
     history,
   }) => {
    const mode = useInput('');
    const overwrite = useBoolean(false);
    const targets = useArray([]);
    const source = useInput();
    const collapsed = useBoolean(false);

    const allSupportedLanguages = useMemo(
      () => allLanguages.filter(it => containsLanguage(supportedLanguages, it)),
      [allLanguages, containsLanguage, supportedLanguages],
    );

    const handleTargetChange = useCallback((values: string[]) => {
      if (values.indexOf('all') !== -1) {
        targets.setValue(allSupportedLanguages);
      } else {
        targets.setValue(values);
      }

const App = () => {
  const newTodo = useInput('');
  const showCounter = useBoolean(true);
  const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
  const rotatingNumber = useNumber(0, {
    lowerLimit: 0,
    upperLimit: 4,
    loop: true,
  });
  const counter = useNumber(0);
  const todos = useArray(['hi there', 'sup', 'world']);

  return (
    <div style="{{">
      <h3>Counter</h3>
      <button type="button">
        {' '}
        toggle counter{' '}</button></div>

({
     languageList,
     allLanguages,
     supportedLanguages,
     onTranslate,
     isGoogleTranslateSetUp,
     selectedId,
     history,
   }) => {
    const mode = useInput('');
    const overwrite = useBoolean(false);
    const targets = useArray([]);
    const source = useInput();
    const collapsed = useBoolean(false);

    const allSupportedLanguages = useMemo(
      () => allLanguages.filter(it => containsLanguage(supportedLanguages, it)),
      [allLanguages, containsLanguage, supportedLanguages],
    );

    const handleTargetChange = useCallback((values: string[]) => {
      if (values.indexOf('all') !== -1) {
        targets.setValue(allSupportedLanguages);
      } else {
        targets.setValue(values);
      }
    }, [targets, allLanguages]);

    const handleTranslateClick = useCallback(() => {