MUI useMediaQuery based on component width

I want to know if there is a built in way in MUI that allows me to use useMediaQuery targeting the components width not the vw

I can try something like:

// I just typed this, not actual code... :)
export const Foo () => {
const fooRef = useRef<FooType>();
const [currentWidth,setCurrentWidth] = useState(0);

useEffect(()=> {
  if(fooRef.current){
    setCurrentWidth(fooRef.current.offsetWidth);
  }
},[fooRef])

return <Foo ref=fooRef sx={{bgcolor: useMediaQuery(`(min-width:${currentWidth}px)`) ? 'green' : 'red'}}/>

}

But really looking for a built in way in MUI?