Autocomplete filterVariant with [{value, label}] options show value, not label, when selected

material-react-table version

v2.8.0

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

This could be tested right in deployed official storybook app: https://www.material-react-table.dev/?path=/story/features-filtering-examples--filter-fn-and-filter-variants-faceted

Issue in First Name column. When we press on filter text field dropdown shows labels of suggested filterSelectOptions:

but when we select some of it we see "value" of it in the text field, not a "label" as expected:

It is easy to understand in this example as "label" is uppercase of "value" for each element. We can see how this filterSelectOptions generated in the storybook code:

material-react-table/packages/material-react-table/stories/features/Filtering.stories.tsx

Lines 218 to 221 in fe782f0

    
           filterSelectOptions: data.map((row) => ({ 
        
             label: row.firstName.toUpperCase(), 
        
             value: row.firstName, 
        
           })), //hard coded

I believe that always showing label, not value is the the proper way how autocomplete filter component should work as in my application value is "id" and I don't want to show id as selected element for user, he will not understand it :)

Minimal, Reproducible Example - (Optional, but Recommended)

https://www.material-react-table.dev/?path=/story/features-filtering-examples--filter-fn-and-filter-variants-faceted

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Yes, I am also opening a PR that solves the problem along side this issue

Terms

I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

fix released in v2.11.0

	filterSelectOptions: data.map((row) => ({
	label: row.firstName.toUpperCase(),
	value: row.firstName,
	})), //hard coded