我正在用Next JS开发网页。
在开发环境中，它运行良好，没有任何错误，但在产品环境中构建时，显示此错误消息：

类型错误：此JSX标记的“children”属性需要一个类型为“ReactNode”的子项，但提供了多个子项。

我的代码如下：

import React, { useState } from "react";
import { IconContext } from "react-icons";
import { AiOutlineClose } from "react-icons/ai";
import Modal from "react-modal";
import styled from "styled-components";
import styledButton from "../button/styledButton";
import { ModalCloseButton } from "./ModalCloseButton";

interface ShowModalProps {
    text: string,
    children: React.ReactNode
}

const StyledModal = styled(Modal)`
    position: relative;
    margin: 50px auto 0;
    text-align: center;
    width: 100%;
    height: 90%;
    padding: 5%;
    background-color: #555555;
    box-sizing: border-box;
    overflow-y: auto;
    
    @media screen and (min-width: 768px) {
        width: 40%;
        height: 100%;
        padding: 5%;
        margin: 0 auto;
    }
`

export default function ShowModal({ text, children }: ShowModalProps) {
    const [modalIsOpen, setIsOpen] = useState(false);
    
    return (
        <>
            <styledButton text={text} handleModalState={setIsOpen} />
            <StyledModal
                isOpen={modalIsOpen}
                style={{
                    overlay: {
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'rgba(0, 0, 0, 0.6)',
                    }
                }}
                onRequestClose={() => setIsOpen(false)}
                ariaHideApp={false}
                className="animate__animated animate__fadeIn"
            >
                <IconContext.Provider value={{
                    style: {
                        width: "100%",
                        height: "100%"
                    }
                }}>
                    <ModalCloseButton buttoncolor="#FFFFFF">
                        <AiOutlineClose onClick={() => setIsOpen(false)} />
                    </ModalCloseButton>
                </IconContext.Provider>
                <p>Modal</p>
                {children}
            </StyledModal>
        </>
    )
}

在修改子类型时这样：

子项：JSX.元素

或

子项：JSX.Element| JSX.元素[]

显示另一条错误消息，如下所示：

**类型错误：“Component”不能用作JSX组件。

它的元素类型'ReactElement〈any，any〉|组件〈{}，any，any〉|null'不是有效的JSX元素。
类型“Component〈{}，any，any〉"不能赋给类型”Element|元素类别|空值“。
型别'Component〈{}，any，any〉'无法指派给型别'ElementClass'。
“render（）”返回的类型在这些类型之间不兼容。
无法将类型“React.ReactNode”分配给类型“import（“/home/runner/work/下一个Web/下一个Web/节点模块/@类型/样式化组件/节点模块/@类型/React/索引”）. ReactNode“。
型别'{}'无法指派给型别'ReactNode'。**
我该怎么修？
谢谢！
添加：产品环境：aws
编辑：

return (
<>
    <p>Click Button!</p>
    <ShowModal text="Next">
        <form onsubmit={onSubmit}>
            <input  
                type="text"  
                placeholder="write your first name"/>  
            <input  
                type="text"  
                placeholder="write your last name"/>  
            <button>submit</button>
        </form>
    </showModal>
</>
)