Is there a way to close a disclosure when the screen width reach a certain width?

[allenchuang]

I am using the Disclosure component and the render props pattern along with tailwindcss to render the mobile nav menu

      {({ open, close }) => {
        return (
          <>
            <div
              className={`sm:px-6 lg:px-8 ${
                open
                  ? "bg-gradient-to-l from-black/80 to-black/90"
                  : "bg-gradient-to-b from-black/60 to-transparent"
              }`}
            >
...

However, i noticed that if I open the mobile menu in a smaller width screen and then resize (expand) the window to a normal desktop width, the state of open remains true and it causes issue with my styling since i depend on the open renderProp to decide on the styles applied.

Is there any fix around this? i.e. trigger close() when window screen size >= X px?

Thanks in advance 🙏🏻