[DataGrid] Show label on the filter tooltip

[good-jinu]

• I have followed (at least) the PR section of the contributing guide.

Closes #5492

How it currently works

Here's the example code

import * as React from 'react';
import {DataGrid, GridToolbarFilterButton} from '@mui/x-data-grid';

export default function ConditionalValidationGrid() {
    return (
        <DataGrid
            filterModel={{
                items: [{field: 'status', operator: 'isAnyOf', value: ['Status 0', 'Status 1']}],
            }}
            rows={[
                {id: 0, status: 'Status 0'},
                {id: 1, status: 'Status 1'},
                {id: 2, status: 'Status 2'},
            ]}
            columns={[
                {
                    field: 'status',
                    type: 'singleSelect',
                    valueOptions: [
                        {label: 'pending', value: 'Status 0'},
                        {label: 'success', value: 'Status 1'},
                        {label: 'error', value: 'Status 2'},
                    ],
                },
            ]}
            slots={{toolbar: GridToolbarFilterButton}}
        />
    );
}

When mouse goes over Filter button, It shows the tooltip

The tooltip shows the value (Status 0,Status 1), while people most likely expecting to see the label (pending,success).

Since It shows the label for other spaces, It makes sense to show label rather than the value.

How It changed

I've modified the getValueAsString function to use label instead of value for the singleSelect type

When valueOptions is given with label, The tooltip shows the label.

---

Given the function name getValueAsString, I'm not entirely sure if passing label is the best approach.

[mui-bot]

Deploy preview: https://deploy-preview-15933--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 43e5ac7