TypeScript. Присвоить переменной JSX элемент

У меня есть очень простая функция, которая возвращает инпут и его значение. Такой себе хук. Проблема в том, что я не знаю как, JSX элемент записать в переменную, когда переписываю компонент на TS. На обычном Реакте, всё отлично. Вот сама функция:

export const useInput = () => {
    const [val, setInputValue] = React.useState("");

    const inputValueHandler = (e: React.FormEvent<HTMLInputElement>) => {
        const currentTarget = e.target as HTMLInputElement;
        setInputValue(currentTarget.value);
    };
      
     const input: JSX.Element = <input value={val} onChange={inputValueHandler}/>;
    
    return [val, input];
  }

а ругается вот тут

     const input: JSX.Element = <input value={val} onChange={inputValueHandler}/>;

ошибка:

"input" относится к значению, но здесь используется как тип. Возможно, вы имели в виду "typeof input"?ts(2749)