How to change color of some features dynamically in the mapbox?

I’ve created a React project, and I’ve been trying to use Mapbox to work with map. I’ve created a function to change the color of features based on dynamic conditions. My code is something like this:

function setStyle(id, color,condition) {
            var arr = [];
            
            var f = map.getSource('shp-'+ id)._data
            f.features.forEach((elm,index) => {
                if (eval(condition)) {
                    arr.push(elm.id)
                }
                
            })
            map.setPaintProperty(
                id,
                'fill-color',
                ['match', ['id'], arr, color, 'blue' ]
            );
        }

in this function, I first find the ids of features that are supplied to the given condition and then use setPaintProperty to change the color of selected features by dynamic color that come from input as a parameter.
The problem is that when I use this function multiple times the color of features that are not supplied to the condition will change to the default for instance:

// change the color of features to the red when their area is less than 200
1- setStyle(1,'red','f.feature.properties.area < 200')

// change the color of features to the green when their area is between 200 and 500
2- setStyle(1,'green','f.feature.properties.area > 200 && f.feature.properties.area <500')

// change the color of features to the orange when their area is greater than 500
3- setStyle(1,'orange','f.feature.properties.area > 500')

In the first time that setStyle is called we have two colors red and blue.
In the second time that setStyle is called I except to have red and green and blue but it will change to green and blue and previous colors I mean red will change to the blue.
All in all, I need to sustain previous color of features.
How can I handle this problem ???