синтаксическая ошибка при вводе реагирующих ссылок с использованием ловушек useImperativeHandle

Question

У меня есть следующий контролируемый компонент, использующий forwardRef. Я хочу выставить две пользовательские функции на компонент ref, и я набрал форму интерфейса:

interface SearchProps {
  onChange: (event) => void;
}

interface SearchRef {
  clear: () => void;
  focus: () => void;
}

const SearchInput = forwardRef<SearchRef, SearchProps>(({ onChange }, ref) => {
  const inputRef = useRef<HTMLInputElement>();
  const [inputValue, setInputValue] = useState('');

  useImperativeHandle(ref, () => ({
    clear: () => console.log('clear!'),
    focus: () => console.log('focus!')
   })
  );

  return (
    <InputText 
      ref={inputRef}
      onChange={
        useCallback(e => {
          setInputValue(e.currentTarget.value);
          onChange(e.currentTarget.value);
        }, [setInputValue, onChange])
      }
    />
  );
});

Теперь этот код выдает мне следующую ошибку:

SyntaxError: ... Unexpected token, expected ";"

По сути говоря, это не нравится forwardRef<SearchInput, SearchProps>, по какой-то причине "неожиданный токен" возникает при закрытии > в этой строке

Но если я удаляю useImperativeHandle блокируйте, тогда я больше не получаю эту ошибку - я полностью потерян, почему я получаю эту синтаксическую ошибку? Это как-то связано с тем, как я определяю свой SearchRef интерфейс? Это не очень полезная или описательная ошибка, поэтому я совершенно не знаю, как к этому подойти. Любая помощь будет принята с благодарностью!