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

https://nextjs.org/docs/messages/react-hydration-error

Hydration 오류이다.
nextJs에서 흔하게 나타나는 오류로, 마운트가 될 때 외부 라이브러리 떄문에 종종 일어난다.
보통 라이브러리들은 브라우저 api를 많이 쓰기에 useEFfect안에 넣어주거나 다이나믹import를 써서 사용해야함

const isMobile = useMediaQuery({ maxWidth: 823 });
const isPc = useMediaQuery({ minWidth: 824 });
해당 부분(useMediaQuery) 때문에 에러가 일어났다.

isPc, mobile state를 설정해주고, 해당 mobile일 때 반응형 효과를 줘라

const isPc = useMediaQuery({ minWidth: 824 });
const [isMobile, setIsMobile] = useState(false);
const mobile = useMediaQuery({ maxWidth: 823 });


useEffect(() => {
 setIsMobile(mobile);
}, [mobile]);

{isMobile && (
       <>
         {isModalActive ? (
           <CustomModal
             modal={isModalActive}
             setModal={setIsModalActive}
             width="500"
             height="-20"
             element={
               <>
                 <ModalMapsWrap>
                   <ModalMaps />
                   <ModalMapsBackButton
                     onClick={() => {
                       setIsModalActive(!isModalActive);
                     }}
                   >
                     <MobileCancle src="/Back-point.png" />
                   </ModalMapsBackButton>
                 </ModalMapsWrap>
               </>
             }
           />
         ) : (
           ''
         )}
       </>
     )}

참고 https://chana.tistory.com/entry/Nextjs-mobile-responsive-react-responsive