Hello,

I'm running into an error, I'm using react-responsive, and I'm rendering different code depending on the screen size. On desktop, I get no error, and on mobile, I get 3x this error :

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <main>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
div
main
MotionComponent
div
MotionComponent
PresenceChild
AnimatePresence
Layout
Page

__


This is the different code, I don't understand what could cause this...


{!isMobile && ( <> <swiper-container init="false" ref={swiperElRef}> <SliceZone slices={page.data.slices} isMobile={isMobile} components={components} /> </swiper-container> {/* <div className="swiper-paginatio sans-serif">Pagination</div> */} <div className="swiper-button-next-o"></div> <div className="swiper-button-prev-o"></div> <div className="follow-mouse"> <div className="swiper-paginatio sans-serif">Pagination</div> <div className="">Next</div> </div> </> )} {isMobile && ( <> <div className="images-wrapper"> <SliceZone slices={page.data.slices} components={components} isMobile={isMobile} /> </div> </> )}