Trying to display column header inside cell, throws an error if the column does not have header provided, even if it's optional.

[htmlAndMore]

Describe the bug

I am using React Table and I do need to display the column header inside of the cell IF the column header is provided. I have tried to make this, but seems to be a code issue.

This is the code snippet:
const renderColumnHeader = (cell: Cell): React.ReactNode | JSX.Element | null => { const columnHeader = cell?.column?.columnDef?.header; if (!columnHeader) { return null; } if (typeof columnHeader === 'function') { return columnHeader(); } return columnHeader; };

Anyway, it seems cell?.column?.columnDef?.header has value even if the header column is not provided.

Your minimal, reproducible example

https://codesandbox.io/s/pedantic-lena-ox2m0s?file=/src/App.tsx

Steps to reproduce

Create a table
Inside a cell row, display the column header if exists.
If all the columns do have headers, the table is displayed

Expected behavior

The column header should be displayed if exists. If there is any column without header defined, it should not throw an error.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Chrome

react-table version

8.7.6

TypeScript version

4.9.4

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.