title: Conflict Lint + Typescript React 18 / 'React' must be in scope when using JSX
body: <p>I'm studying react 18 + typescript, and I have a problem. I have this code that has a problem. React import is not being used. But when I remove this import, in the return line it says &quot;React must be in scope when using JSX&quot;. How can I remove that error?</p>
  <p>What is the best way to create the component? I could use React.FC and stop the error but it doesn't seem like the best solution</p>
  <p>Obs: I know I can disable this rule in eslintrc, but I would like to better understand the error and resolve it in the correct way</p>
  <pre><code>import React from 'react'
  
  type TweetProps = {
    text: string;
  };
  
  function Tweet(props: TweetProps) {
    const { text } = props; //error in here if i remove import
     //React must be in scope when using JSX
  
    return &lt;p&gt;{text}&lt;/p&gt;;
  }
  
  export default Tweet;
  </code></pre>