Columns are sorted when clicking header filters

[mordonez-me]

Describe the bug

To Reproduce

1. Create a header with a filter like the the [Header filters](example https://adazzle.github.io/react-data-grid/#/header-filters)
2. Enable sorting like in the [Columns reordering[(example https://adazzle.github.io/react-data-grid/#/columns-reordering)

Expected behavior

Not sort the column

Environment

• react-data-grid version: ^7.0.0-beta.44
• react/react-dom version: ^18.2.0

Additional context

The problem comes from this line

react-data-grid/src/HeaderCell.tsx

Line 279 in b667cec

onClick={onClick}

onClick is on top of everything so anything you put inside the header div will be activated as soon as you click the cell, even the filter which is inside the header renderer

Video:

Monosnap.screencast.2024-06-06.08-43-19.mp4

[balaji-sivasakthi]

Share Codepen link, I would be more helpful