title: Typescript error: is not assignable to type 'IntrinsicAttributes'. Property 'children' does not exist on type 'IntrinsicAttributes'
body: <p>I created a curved container and I'm trying to use it in my project, but an error is reported and I don't know how to solve it, does anyone have any ideas?</p>
  <pre><code>import Image from &quot;next/image&quot;;
  import curveImage from &quot;/public/curve.png&quot;;
  import curveReverseImage from &quot;/public/curve-reverse.png&quot;;
  import curveImageBlack from &quot;/public/curve-black.png&quot;;
  import curveReverseImageBlack from &quot;/public/curve-reverse-black.png&quot;;
  
  type Props = {
    children: JSX.Element;
    curveTop?: &quot;white&quot; | &quot;black&quot; | &quot;none&quot;;
    curveBottom?: &quot;white&quot; | &quot;black&quot; | &quot;none&quot;;
    [defaultParam: string]: any;
  };
  
  export default function CurvedContainer({
    children,
    curveTop = &quot;white&quot;,
    curveBottom = &quot;white&quot;,
    ...rest
  }: Props) {
    return (
      &lt;div {...rest} className={`${rest.className} flex flex-col`}&gt;
        {curveTop != &quot;none&quot; &amp;&amp; (
          &lt;div className=&quot;curveTop&quot; style={{ marginTop: -1 }}&gt;
            &lt;Image
              height=&quot;250&quot;
              alt=&quot;top image&quot;
              src={
                curveTop == &quot;white&quot; ? curveReverseImage : curveReverseImageBlack
              }
            /&gt;
          &lt;/div&gt;
        )}
  
        {children}
  
        {curveBottom != &quot;none&quot; &amp;&amp; (
          &lt;div className=&quot;curveTop -mb-2&quot;&gt;
            &lt;Image
              height=&quot;250&quot;
              alt=&quot;top image&quot;
              src={curveBottom == &quot;white&quot; ? curveImage : curveImageBlack}
            /&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>I don't know why this error shows up unfortunately. If someone could help me that would be really dope!</p>
  <pre><code> &lt;Container
      className=&quot;none&quot;
      curveTop=&quot;white&quot;
      curveBottom=&quot;none&quot;
    &gt;
      &lt;div className=&quot;flex flex-row items-center justify-center p-8&quot;&gt;
        &lt;a href=&quot;#&quot; className={`bg-black text-white font-bold
           tracking-wider text-sm text-center uppercase rounded-full px-8 py-2 shadow-lg `}
          type=&quot;button&quot;&gt;
          Saiba Mais
        &lt;/a&gt;
      &lt;/div&gt;
   &lt;/Container&gt;
  </code></pre>
  <p>error here:</p>
  <p><a href="https://i.stack.imgur.com/1Nfoh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Nfoh.png" alt="enter image description here" /></a></p>