Separate filter and sorting button for react table

Question

I want to create a separate button for each column in react table, to sort as well as to filter similar to the picture given below.

I'm able to make the button work, but every single time I'm trying to click on the button, the column is getting sorted.

Here is the CodeSandBox

• If I'm removing column.getSortByToggleProps() then the onClick() event is not working on the button.
• I'm not able to make the sorting happen even on clicking on the ASCENDING button using sortBy(id, false, false), it's throwing errors.

What I want it to do.

• When you click on the filter icon the column shouldn't get sorted.
• It should sort the columns when you click the buttons in the component, not on the header title.
• When you select one checkbox from the filter the component should stay open.