How do you reset a state on certain breakpoint?

export default function Home() {
  const [navMenu, setNavMenu] = useState(false);

  const handleNavMenu = () => {
    setNavMenu(!navMenu)

  }
  
  return (
    <header className='fixed flex top-0 right py-2 px-2 w-full'>
      <nav className='flex w-full justify-between'>
        <div className='p-5'>
          <h2>RRSDL</h2>
        </div>

        <div onClick={handleNavMenu} className='sm:hidden p-5 cursor-pointer'>
          {navMenu ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
        </div>

        <ul className={navMenu ?
        `sm:flex w-full z-[-1] sm:z-auto sm:justify-end 
        absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto 
        left-[100%] sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`
          
        :
        
        `sm:flex w-full z-[-1] sm:z-auto sm:justify-end 
        absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto 
        left-0 sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`}>
          <li className='p-5'><Link href="/">Home</Link></li>
          <li className='p-5'><Link href="/about">About</Link></li>
          <li className='p-5'><Link href="/projects">projects</Link></li>
          <li className='p-5'><Link href="/contacts">Contact</Link></li>
        </ul>
      </nav>
    </header>
  )
}

export default function Home() {
  const [navMenu, setNavMenu] = useState(false);

  const handleNavMenu = () => {
    setNavMenu(!navMenu)

  }
  
  return (
    <header className='fixed flex top-0 right py-2 px-2 w-full'>
      <nav className='flex w-full justify-between'>
        <div className='p-5'>
          <h2>RRSDL</h2>
        </div>

        <div onClick={handleNavMenu} className='sm:hidden p-5 cursor-pointer'>
          {navMenu ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
        </div>

        <ul className={navMenu ?
        `sm:flex w-full z-[-1] sm:z-auto sm:justify-end 
        absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto 
        left-[100%] sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`
          
        :
        
        `sm:flex w-full z-[-1] sm:z-auto sm:justify-end 
        absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto 
        left-0 sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`}>
          <li className='p-5'><Link href="/">Home</Link></li>
          <li className='p-5'><Link href="/about">About</Link></li>
          <li className='p-5'><Link href="/projects">projects</Link></li>
          <li className='p-5'><Link href="/contacts">Contact</Link></li>
        </ul>
      </nav>
    </header>
  )
}