Resize Event Not Catching Smallest Breakpoint in React [duplicate]

I'm working on a React component and using the code below to change a class between small, medium, and large to handle mobile, tablet, and desktop (`banner--${size}`) with the size as a state variable (This is the preferred strategy where I'm working).

It's changing fine from large to medium, but it's not changing to small when it gets below 719px. Any ideas why? I tried replacing textAlignment with window.innerWidth in hopes that might trigger it then, but that didn't work.

const [ size , setSize ] = useState(""); const desktopBreakpoint = 1024, mobileBreakpoint = 719; useEffect(() => { function handleResize() { if ( window.innerWidth >= desktopBreakpoint ){ setSize( "large" ); } else if ( mobileBreakpoint < window.innerWidth < desktopBreakpoint ) { setSize( "medium" ); } else { setSize( "small" ); } } handleResize(); window.addEventListener( "resize" , handleResize ); return () => { window.removeEventListener( "resize" , handleResize ); }; }, [ textAlignment ] );