I'm using Material UI DataGridPro component to build a React Js app.

I want to create a custom filtering.

The red box in the image below is an IconButton for the filtering view and the blue box is for the column showing/hiding view.

I want to change the behavior of the custom filtering view.

If the filter icon is clicked, then the DataGridPro header will show some Select and TextField components as the filter fields like this image below.

If we click one of the Select and TextField components, the Data Grid Pro component will trigger the onSortModelChange prop to change the sortModel value like this image below.

So now the Data Grid Pro component is sorted based on the column.

Here is the conditions I want: if we click one of the Select and TextField components inside the Data Grid Pro header, the Data Grid Pro will not trigger the onSortModelChange prop which means that the sortModel value is not changed

Here is the playground: https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-xmwf0?file=/src/App.js

I have tried to add sortable: false for every column but it will not show the arrow icon inside the Data Grid Pro header and prevent the column to be sorted. That's not what I want.

I also have added sortModel and onSortModelChange props for the Data Grid Pro component to control the sortModel value but it hasn't worked.

So, what's the solution for this case?