Customizing the contents of a chip label

I have a column for cost in my table. I want the filters to be checkboxes to provide users with the option to filter based on amount range for e.g. <100K, 100K-200K ,etc.

## Expected Behavior

The chip labels should be showing the strings with "Cost: <100K" when the filter is selected

## Current Behavior

The chip labels should be showing the strings with "Cost: 1" when the filter is selected 1 is the value in the name column.
## Steps to Reproduce (for bugs)

Column is defined as follows:
```
{
name: "amt",
label:"COST AMT",
options: {
display:true,
filter: true,
sort: true,
customBodyRender: (value, tableMeta, updateValue) =>{
if(!value){
return "N/A"
}
else{
return formatter.format(value) // converts the amount into $ string, for example 100 becomes $100.00
}
},
filterOptions: {
names: [1,2,3,4,5],
logic(amt, filters) {
amt = Number(amt.replace(/[^0-9.-]+/g, "")); // converts the amount string to number
const show =
(filters.indexOf(1) >= 0 && amt < 1e5) ||
(filters.indexOf(2) >= 0 && amt >= 1e5 && amt < 2.5e5) ||
(filters.indexOf(3) >= 0 && amt >= 2.5e5 && amt < 5e5) ||
(filters.indexOf(4) >= 0 && amt >= 5e5 && amt < 1e6) ||
(filters.indexOf(5) >= 0 && amt >= 1e6)
const filtered = !show;
return filtered;
},
renderValue: v => {
let name_map = {1: "<100K", 2:"100K-250K", 3:"250K-500K",4:"500K-1M", 5:"1M and above"}
return name_map[v]
}

},
filterType:"checkbox",

customFilterListOptions: {
//THIS FUNCTION DOES NOT GET CALLED
render: (v) =>{
console.log("Render called")
let name_map = { 1: "<100K", 2: "100K-250K", 3: "250K-500K", 4: "500K-1M", 5: "1M and above" }
return `Cost Amt : ${name_map[v]}`
}
}
}
},
```

The reason I defined is using 1,2,3... instead of using the actual strings i.e. "<100K" etc. is because if I just use the list of names instead the order in which the options in the filter menu does not match the order in which they are placed in the name array.

The filter work as expected but the chip labels are not showing the correct label

## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | ^5.10.9 |
| MUI-datatables | ^4.3.0 |
| React | ^17.0.1 |
| browser | Chrome |
| etc | |

Start by reproducing the provided column definition with filterType set to checkbox, then trace how filterOptions.renderValue and customFilterListOptions.render are handled when selected values become chip labels. Done means the selected cost ranges display their mapped labels, such as "Cost Amt: <100K", instead of numeric values.

Written by the indexing model from the issue text.