title: Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any)
body: <p>I have a component that looks like this. This version works perfectly:</p>
  <pre><code>export default function StatusMessage(isAdded: boolean, errorMessage: string) {
    if (isAdded) {
      return &lt;ResultAlert severity=&quot;success&quot; text=&quot;User Added&quot; /&gt;;
    } else {
      if (errorMessage !== '') {
        if (
          errorMessage.includes('email')
        ) {
          return &lt;ResultAlert severity=&quot;error&quot; /&gt;;
        }
        if (
          errorMessage.includes('phone number')
        ) {
          return (
            &lt;ResultAlert severity=&quot;error&quot; text=&quot;&quot; /&gt;
          );
        } 
      }
    }
  }
  </code></pre>
  <p>Now, I am trying to change the way I export it. I am trying this:</p>
  <pre><code>type StatusMessageProps = {
    isAdded: boolean; 
    errorMessage: string;
  }
  
  export const StatusMessage: React.FunctionComponent&lt;StatusMessageProps&gt; = ({
    isAdded,
    errorMessage
  }) =&gt; {
  </code></pre>
  <p>but i keep getting an error that:</p>
  <pre><code>Type '({ isAdded, errorMessage }: PropsWithChildren&lt;StatusMessageProps&gt;) =&gt; Element | undefined' is not assignable to type 'FunctionComponent&lt;StatusMessageProps&gt;'.
    Type 'Element | undefined' is not assignable to type 'ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null'.
      Type 'undefined' is not assignable to type 'ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null'.
  </code></pre>
  <pre><code>I am using the same method on different pages but the error is only here
  </code></pre>
  <p>Edit:</p>
  <p>I am using this component like this:</p>
  <pre><code> const [isAdded, setIsAdded] = useState(false);
  
  {isSubmitted &amp;&amp; StatusMessage(isAdded, errorMessage)}
  </code></pre>
  <p>it gives me an error on isAdded that</p>
  <pre><code>Argument of type 'boolean' is not assignable to parameter of type 'PropsWithChildren&lt;StatusMessageProps&gt;'.ts(2345)
  </code></pre>