反应Portal错误渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，请返回null

Question

发展环境。
・ next.js
・打字稿
・ react.js

我想使用门户显示卡片。
返回，但显示错误。

错误消息
错误：门户网站（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null。

const CardPortal = styled(Card)<{ top: number }>`
  position: absolute;
  top: ${(props) => props.top}px;
  left: 300px;
`;

const Test: FunctionComponent = () => {
  const [positionTop, setPositionTop] = useState(0);
  const check = (e: any) => {
    setPositionTop(e.pageY);
  };
  const aaa = [1, 2, 3, 4];
  return (
    <>
      {aaa.map((aa) => (
        <div style={{ height: '100px', background: 'red' }} key={aa} onClick={(e) => check(e)}>
          get position

        </div>
      ))}
      <Portal>
        <CardPortal height={300} width={250} top={positionTop}></CardPortal>
      </Portal>
    </>
  );
};
export default Test;

import ReactDOM from 'react-dom';

export const Portal = ({ children }) => {
  if (process.browser) {
    const element = document.querySelector('#__next');
    return element ? ReactDOM.createPortal(children, element) : null;
  }
};