title: TS Error - Create Custom React Alert Component
body: <p>I am trying to create a custom react material ui alert component that I can call on different pages by simply passing in the text and severity as parameters. I am trying to use this:</p>
  
  <pre><code>export default function CustomAlert(severity: string, text: string){
      &lt;Alert style={{width:'50%'}} severity={severity}&gt; {text}&lt;/Alert&gt;
  }
  </code></pre>
  
  <p>but I keep getting an error on the first severity word <code>severity={severity}</code>that:</p>
  
  <pre><code>Type 'string' is not assignable to type '"error" | "success" | "info" | "warning" | undefined'.ts(2322)
  Alert.d.ts(25, 3): The expected type comes from property 'severity' which is declared here on type 'IntrinsicAttributes &amp; AlertProps'
  </code></pre>
  
  <p>How could I fix this? Or is there an alternative method to customise this component?</p>
  
  <p>Edit: I am still not being able to use it in my other page:</p>
  
  <pre><code>  function StatusMessage(){
      if (isRemoved){
        return (
        &lt;Alert style={{width:'25%'}} severity="success"&gt; User Removed&lt;/Alert&gt;
          )
        }
        else{
          if(errorMessage!=''){
          if (errorMessage.includes(`Couldn't find user`)){
            return (
              &lt;div&gt;
              {/* &lt;Alert style={{width:'25%'}} severity="error"&gt; Couldn't Find User&lt;/Alert&gt; */}
              &lt;CustomAlert&gt;&lt;/CustomAlert&gt;
              &lt;/div&gt;
                )
          }       
        }}
    }
  </code></pre>
  
  <p>I get errors on CustomAlert that:</p>
  
  <pre><code>JSX element type 'void' is not a constructor function for JSX elements.ts(2605)
  Type '{}' is not assignable to type '(IntrinsicAttributes &amp; "success") | (IntrinsicAttributes &amp; "info") | (IntrinsicAttributes &amp; "warning") | (IntrinsicAttributes &amp; "error")'.
    Type '{}' is not assignable to type '"error"'.ts(2322)
  </code></pre>