I have a component on a ts file that renders a component in js file, something like this:

// typescript
const MyTSComponent = (props: propsType) => {
  return (
    <MyJSComponent units="m3" /> <-- Error!
  );
}

// javascript
const MyJSComponent = (props) => {
  return (
    <div>{props.units}</div>
  );
}

The problem I have is my ts compiler throws an error on the ts component on units prop that says:

Type 'string' cannot be asigned to type 'null | undefined'

Why is typescript validating props of a js component? Here is my tsconfig file:

{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "lib": ["dom", "dom.iterable", "esnext"],
        "jsx": "react",
        "sourceMap": true,
        "noEmit": true,
        "importHelpers": true,
        "isolatedModules": true,
        "strictNullChecks": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "baseUrl": "src",
        "downlevelIteration": true,
        "allowJs": true
    },
    "include": ["src"],
    "exclude": ["node_modules/*"]
}

Thank you!