Next.js에서 React Portal을 잘못 적용한건지 궁금합니다.

Question

안녕하세요! next.js에서 모달 구현을 위해 react portal을 사용하였습니다.
그런데 제가 의도한 것과 다른 결과가 나와 코드를 잘못 작성한건지,
제가 portal에 대해 이해를 잘못 하고 있는건지 궁금해 질문드립니다.

현재 next.js 14.0.4 + tailwind 환경에서 작업하고 있습니다.

// src/app/layout.tsx
(사진1 첨부)

// src/components/modal/ Modal.tsx
(사진2 첨부)

// 실제 출력 화면
(사진3 첨부)

portal을 사용하면 같은 body 태그안에 있는 형제 컴포넌트의 z-index의 영향을 받지 않는다고 알고 있는데,
첨부한 사진과 같이 <body> 안 형제 컴포넌트 하위에 위치한 컴포넌트의 z-index의 영향을 받고 있습니다.

portal로 출력할 부분을 children으로도 받아보고, 포탈 컴포넌트 안에서도 작성해보고 했는데 모두 동일한 결과가 출력됩니다.
포탈 컴포넌트에도 z-index를 적용해줘야 하는건지, 제가 코드를 잘못 작성한건지 알고 싶습니다.

감사합니다!