Should I use react useState and conditional rendering to handle various screen sizes or media queries

I'm using standard css3 and creating css files for each component and I am trying to decide on whether or not to use an event listener and multiple return functions inside of my react component. As apposed to writing out multiple media queries inside of my CSS file. Or alternatively using conditional classNames defined by useState to define a small, medium and large screen variable. That I could then use in my css file to keep the elements and their sizes written next to eachother. Instead of creating multiple css files, or Media queries.

I have a feeling with either method I run the risk of things becoming quite messy in the future with some screen sizes being updated as others aren't.

Is there a one size fits all solution I'm not seeing? Or do you think one of these methods is better than the next?

//What I have atm

const Comp = () => {
    const [width, setWidth] = useState();
    const [size, setSize] = useState('large');

    useEffect(() => {
        //add event handler...
        //setStates
    }, [states])

    if(size === '') return {
    <smallComponent/>
    } else if (size === '') return {
    <bigComponent/>
    }
}