How to get React App change content on the screen when screen width changes

I have certain components in my React project which will render only for mobile devices.

I have set it up like this -

const LandingPage = (props) => {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    window.screen.width <= 760 ? setIsMobile(true) : setIsMobile(false);
  }, [window.screen.width]);

   **...Components render here**
}

The problem with this is that I get the desired results when I reduce the screen width only after I refresh the page. But I want it to do it automatically when the breakpoint reaches.

How do I achieve that?

Thanks in advance.