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

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>
      {showCounter.value &amp;&amp; }
      <h3>Limited number</h3>
      <div>
        {'This number will stop increasing/decreasing when it reaches the "lowerLimit" or the "upperLimit"'}
      </div>
      <br>
      <button type="button"> limitedNumber.increase()}&gt;
        {' '}</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]);