How to dynamically change map to grayscale?

I am currently using Mapbox GL React.js to display a map in my web app. I have a circle around my location and I want to make it so that everything inside the circle has its normal color but if outside the circle it needs to be grayscale.

I would be helpful if you could tell me how to achieve that?

Example:

https://stackoverflow.com/questions/66467132/how-to-dynamically-change-map-to-grayscale March 04, 2021 at 09:05AM