ReactTable7 с простой всплывающей подсказкой при наведении курсора на элементы ‹th›

TL / DR: хотите отображать всплывающие подсказки при наведении курсора на заголовки с помощью таблицы реакций (v7 с хуками).

Я пытаюсь создать простую всплывающую подсказку для таблицы, созданной в React, с использованием новой библиотеки ReactTable. Я не знаю, как импортировать ReactTable во фрагмент кода Stackoverflow, но это разветвленная версия примерной таблицы со страницы npm для библиотеки. Я пытаюсь изменить эту таблицу, чтобы в ней были правильные заголовки всплывающих подсказок. В этой песочнице кода в App.js, где создается массив columns, я добавил следующий ключ tipText к столбцам:

const columns = React.useMemo(
  () => [
    {
      Header: 'Name',
      columns: [
        {
          Header: 'First Name',
          accessor: 'firstName',
          tipText: 'Text for the First Name tooltip'
        },
        {
          Header: 'Last Name',
          accessor: 'lastName',
          tipText: 'Text for the Last Name tooltip'
        },
      ],
    },{
      ...

... чтобы я мог использовать tipText при рендеринге таблицы для отображения всплывающей подсказки. Я также изменил рендеринг элемента <thead>, чтобы включить класс для th и диапазон для отображения всплывающей подсказки:

<thead>
  {headerGroups.map(headerGroup => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map(column => (
        <th 
          className='new-tooltip' // added a new class
          {...column.getHeaderProps()}>{column.render('Header')}
          <span>Tooltip Text</span> // and a span for the tooltip (with the wrong text)
        </th>
      ))}
    </tr>
  ))}
</thead>

Я также добавил дополнительные стили CSS, чтобы диапазон отображался при наведении курсора. При внесении этих изменений всплывающая подсказка отображается, однако она размещена неправильно и текст не отображается правильно. Тогда у меня два вопроса:

1: Как передать tipText в рендеринг, чтобы отображать правильный текст во всплывающей подсказке?

2: Как разместить всплывающую подсказку так, чтобы она отображалась в правильном месте (над соответствующим <th> элементом)

Спасибо!

Изменить: если у кого-то есть ссылка на какое-либо сообщение stackoverflow, которое успешно отображает фрагмент кода, отображающий таблицу из response-table v7, поделитесь, пожалуйста, так как я хотел бы обновить это сообщение с помощью кода, отличного от кода -sandbox рабочий пример, если возможно