Cannot read properties of null (reading 'useRef') 오류 질문

강의에서 진행 된 요소 추가 전까진 정상 작동 되는 것 확인 했습니다. Menu 추가 후 아래와 같은 오류가 출력 됩니다.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app

See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

TypeError: Cannot read properties of null (reading 'useRef')

at useRef (C:\Users\sion\node_modules\react\cjs\react.development.js:1630:21)

at Object.render (C:\Users\sion\node_modules\antd\lib\menu\index.js:19:37)

at ReactDOMServerRenderer.render (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3535:44)

at ReactDOMServerRenderer.read (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)

at renderToString (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)

at Object.renderPage (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851)

at Document.getInitialProps (C:\Users\sion\Documents\prepare\front\.next\server\pages\_document.js:264:19)

at loadGetInitialProps (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101)

at renderToHTML (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142)

at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

터미널에 찍힌 로그입니다.

react/react dom 버전은 동일함을 확인했고 16.14.0 버전 사용 중입니다.

구글링 중 react hook form을 인스톨 하라는 검색 결과가 있어 해당 패키지 설치 했습니다. 버전은 7.49.2 사용 중 입니다.

로컬에서 실행 된 화면입니다.