React-native: Migration from javascript to typescript

I'm trying to evaluate the cost to migrate our project codebase from javascript to typescrit, and our main goal is mainly to not have to transform ALL of our code base to typescript now but step by step.

I followed the doc for this https://reactnative.dev/docs/typescript

I tried to transform a random file to typescript

interface Props {
  iconName: string;
  iconType?: string;
  text: string;
  onPress?(evt: GestureResponderEvent): void;
  style?: any;
}

const ButtonWithBigIconAndSmallText: FC<Props> = ({
  iconName, iconType, text, onPress, style,
}): ReactElement => (
  <TouchableOpacity onPress={onPress} style={{ ...styles.button, ...style }}>
    {/* Commented it to reduce the error scope */}
    {/*<HinfactIcon name={iconName} type={iconType} size={40} />*/}
    <HinfactText style={{
      textTransform: 'uppercase',
      fontSize: 9,
      fontWeight: 'bold',
    }}
    >
      {text}
    </HinfactText>
  </TouchableOpacity>
);

which result with these errors

error TS2786: 'HinfactText' cannot be used as a JSX component. Its instance type 'HinfactText' is not a valid JSX element.
error TS2607:  JSX element class does not support attributes because it does not have a 'props' property.

If I uncomment HinfactIcon, I then have 4 error, the exact same one than HinfactText but for HinfactIcon - which is why I commeted to remove useless logs :)

But now, if i copy past the code used in HinfactText.jsx into a file Test.jsx, but in the same folder than my ButtonWithBigIconAndSmallText.tsx, everything works perfectly!

Why? It's exactly the same content!

interface Props {
  iconName: string;
  iconType?: string;
  text: string;
  onPress?(evt: GestureResponderEvent): void;
  style?: any;
}

const ButtonWithBigIconAndSmallText: FC<Props> = ({
  iconName, iconType, text, onPress, style,
}): ReactElement => (
  <TouchableOpacity onPress={onPress} style={{ ...styles.button, ...style }}>
    <Test style={{
      textTransform: 'uppercase',
      fontSize: 9,
      fontWeight: 'bold',
    }}
    >
      {text}
    </Test>
  </TouchableOpacity>
);

Here is the architecture

src/
   Online/
         ButtonWithBigIconAnsSmallText.tsx
         Test.jsx
   Components/
         HinfactText.jsx

package.json :

"dependencies": {
    "@types/jest": "^27.0.3",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-native": "^0.66.8",
    "@types/react-test-renderer": "^17.0.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-devtools-core": "^4.14.0",
    "react-dom": "^17.0.2",
    "react-native": "^0.66.0",
    "typescript": "^4.5.2",
    //...
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/eslint-parser": "^7.14.3",
    "@testing-library/jest-native": "^4.0.2",
    "@testing-library/react-native": "^9.0.0",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    //...
  },

tsconfig.json :

{
  "compilerOptions": {
    "target": "es2017",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["es2017"],                        /* Specify library files to be included in the compilation. */
    "allowSyntheticDefaultImports": true,
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "outDir": "out",                           /* Redirect output structure to the directory. */
    "skipLibCheck": true,                     /* Do not check libraries */
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "./node_modules",
    "node_modules/*",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}