Как передать ref через массив в forwardRef в машинописном тексте и отреагировать?

Question

У меня есть пример, который я создал в коде. Таблица отображается с помощью th, но в моей среде IDE машинописный текст жалуется на тип в этой строке:

<TH handleSort={handleSort} ref={refsTh[ind]}>

--- Тип ошибки 'MutableRefObject' не может быть присвоен типу '((instance: HTMLTableHeaderCellElement | null ) => недействительно) | RefObject | null | undefined '. Тип MutableRefObject нельзя присвоить типу RefObject. «Текущие» типы собственности несовместимы. Тип «unknown» нельзя присвоить типу «HTMLTableHeaderCellElement | ноль'. Тип «unknown» не может быть назначен типу «HTMLTableHeaderCellElement».

Я заставил этот пример работать, когда не передается массив, а вместо него передается одна ссылка. Проблема, похоже, в том, что я динамически создаю useRef внутри массива. Кто-нибудь может посоветовать? Спасибо

пример кода: https://codepen.io/inspiraller/pen/OJMRZWQ

// import React from 'react';

// ######################################
type shapeTH = {
  handleSort: () => void,
  children: React.ReactNode // BUG: can't pass children any other way to forwardRef
};

type Ref = HTMLTableHeaderCellElement | null;

const TH = React.forwardRef<Ref, shapeTH>(
  ({children, handleSort}, ref) => (
    <th ref={ref} onClick={handleSort}>
      <span className="thSpan">{children}</span>
    </th>
  )
);

// const TH:React.FC<shapeTH> = ({children, handleSort}) => (
//   <th onClick={handleSort}>
//     <span className="thSpan">{children}</span>
//   </th>
// );

// ##################################################

const App:React.FC = () => {
  const arrTh=['id', 'name', 'colour'];

  type shapeRef = ReturnType<typeof React.useRef>;

  const refsTh: Array<shapeRef> = arrTh.map(() => (
    React.useRef<HTMLTableHeaderCellElement>(null)
  ));
  const handleSort: shapeTH['handleSort'] = () => {};
  return (
    <table className="tableGeneric">
      <thead>
        <tr>
          {
            arrTh.map((item, ind) => (
              <TH handleSort={handleSort} ref={refsTh[ind]}>
                {item}
              </TH>
            ))
          }
        </tr>
      </thead>
    </table>
  );
};

// export default App;

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);