Conflict Lint + Typescript React 18 / 'React' must be in scope when using JSX

Question

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 "React must be in scope when using JSX". How can I remove that error?

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

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

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 <p>{text}</p>;
}

export default Tweet;