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

I want to create a custom filtering and column showing/hiding views.

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.

The column showing/hiding feature works fine but the filtering feature doesn't.

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 change the value one of the Select and TextField components, the value will not be shown in the selected component itself. But if we print the value of the Select and TextField components on the console, the value will be printed (but only for one character for the TextField component).

There are 2 errors from this case:

1. the value of the Select and TextField components will not be shown in the component themselves
2. if we select one of the MenuItem components and select outside the Select component, there will be an error

Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.

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

How could these (the errors) happen and what is the solution?

Note:

The problem might come from the controlled components (the Select and Text Field components that have value and on change props) inside the header of the Data Grid component.

If my statement above is true, this renderHeader case might be similar to this case MUI Custom Text Field loses focus on state change but I still haven't found the answer for this DataGridPro issue yet.