React-table вынести фильтр за пределы таблицы

Помогте вынести фильтр за пределы таблицы

TableContainer:

<table {...getTableProps()}>
            <thead>
                {headerGroups.map((headerGroup) => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map((column) => (
                            <th {...column.getHeaderProps()}>
                                {column.render("Header")}
                                <Filter column={column} />
                            </th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row);
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map((cell) => {
                                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                            })}
                        </tr>
                    );
                })}
            </tbody>
        </table>

Custom filter:

export const Filter = ({ column }) => {
    return (
        <div className="Filter" style={{ marginTop: 5 }}>
            {column.canFilter && column.render("Filter")}
        </div>
    );
};
        

Полный код фильтра ...

Исходник: codesandbox

Скрин: нажми меня