title: Type error: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided
body: <p>I'm developing webpage with Next JS.<br />
  In development environment, It is working well without anything error but when build in product environment, this error message is showing:<br />
  <strong>Type error: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.</strong><br />
  My code is here:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { IconContext } from &quot;react-icons&quot;;
  import { AiOutlineClose } from &quot;react-icons/ai&quot;;
  import Modal from &quot;react-modal&quot;;
  import styled from &quot;styled-components&quot;;
  import styledButton from &quot;../button/styledButton&quot;;
  import { ModalCloseButton } from &quot;./ModalCloseButton&quot;;
  
  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 (
          &lt;&gt;
              &lt;styledButton text={text} handleModalState={setIsOpen} /&gt;
              &lt;StyledModal
                  isOpen={modalIsOpen}
                  style={{
                      overlay: {
                          display: 'flex',
                          justifyContent: 'center',
                          alignItems: 'center',
                          backgroundColor: 'rgba(0, 0, 0, 0.6)',
                      }
                  }}
                  onRequestClose={() =&gt; setIsOpen(false)}
                  ariaHideApp={false}
                  className=&quot;animate__animated animate__fadeIn&quot;
              &gt;
                  &lt;IconContext.Provider value={{
                      style: {
                          width: &quot;100%&quot;,
                          height: &quot;100%&quot;
                      }
                  }}&gt;
                      &lt;ModalCloseButton buttoncolor=&quot;#FFFFFF&quot;&gt;
                          &lt;AiOutlineClose onClick={() =&gt; setIsOpen(false)} /&gt;
                      &lt;/ModalCloseButton&gt;
                  &lt;/IconContext.Provider&gt;
                  &lt;p&gt;Modal&lt;/p&gt;
                  {children}
              &lt;/StyledModal&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>When modify children type like this:<br />
  <strong>children: JSX.Element</strong><br />
  or<br />
  <strong>children: JSX.Element|JSX.Element[]</strong></p>
  <p>showing another error message like this:<br />
  <strong>Type error: 'Component' cannot be used as a JSX component.<br />
  Its element type 'ReactElement&lt;any, any&gt; | Component&lt;{}, any, any&gt; | null' is not a valid JSX element.<br />
  Type 'Component&lt;{}, any, any&gt;' is not assignable to type 'Element | ElementClass | null'.<br />
  Type 'Component&lt;{}, any, any&gt;' is not assignable to type 'ElementClass'.<br />
  The types returned by 'render()' are incompatible between these types.<br />
  Type 'React.ReactNode' is not assignable to type 'import(&quot;/home/runner/work/next-web/next-web/node_modules/@types/styled-components/node_modules/@types/react/index&quot;).ReactNode'.<br />
  Type '{}' is not assignable to type 'ReactNode'.</strong></p>
  <p>How can I fix?</p>
  <p>thanks!</p>
  <p>add: <strong>Product environment: aws</strong></p>
  <p>Edit:</p>
  <pre><code>return (
  &lt;&gt;
      &lt;p&gt;Click Button!&lt;/p&gt;
      &lt;ShowModal text=&quot;Next&quot;&gt;
          &lt;form onsubmit={onSubmit}&gt;
              &lt;input  
                  type=&quot;text&quot;  
                  placeholder=&quot;write your first name&quot;/&gt;  
              &lt;input  
                  type=&quot;text&quot;  
                  placeholder=&quot;write your last name&quot;/&gt;  
              &lt;button&gt;submit&lt;/button&gt;
          &lt;/form&gt;
      &lt;/showModal&gt;
  &lt;/&gt;
  )
  </code></pre>