Customizing the contents of a chip label

[saching6]

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