reactjs - Error de Typescript al usar componentes de la biblioteca react: TS2769

Tengo un CRA con Electron que he estado intentando convertir archivos .js|.jsx a .ts|.tsx. Los pasos que seguí son:

1. agrega un archivo tsconfig.json al directorio raíz de mi proyecto.
2. npm install various @types/** dependencias
3. agregar ts-loader y source-map-loader a webpack.config.js
4. cambiar la extensión del archivo del proceso principal de Electron: electron.js y del proceso del renderizador: renderer.js a .ts y .tsx respectivamente

Aunque puedo ejecutar la aplicación con npm start solo cambiando mi archivo del proceso principal: electron.js a electron.ts así como el archivo del proceso de renderizado: renderer.js a renderer.tsx, no puedo resolver los problemas y conflictos que ocurren al convertir mis otros archivos fuente. Los siguientes son los pasos que haría para intentar convertir un archivo .js en un archivo .tsx:

1. Cambiar el nombre del archivo .js a un archivo .tsx
2. Reinicia la aplicación con npm start
3. Revisa y corrige los problemas de TypeScript, ya sean errores de compilación o la falta de definición de tipos para el verificador de tipos.

Enjuaga y repite

Aquí hay un problema específico que he encontrado con varios intentos de convertir un archivo .js a un archivo fuente .tsx:

//MyNav.tsx
import * as React from 'react';
import {Navbar, Nav, Collapse} from 'react-bootstrap';
import {Link} from 'react-router-dom';

const MyNav:React.FC<{}> = () => {
  return(
    <Navbar bg="light" expand="lg">
      <Navbar.Brand as={Link} to={"/"}>BRAND</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Collapse>
        <Nav className="mr-auto">      
          <Nav.Link as={Link} to={"/"}>Dashboard</Nav.Link>
        </Nav>
      </Collapse>
    </Navbar>
    );
  }
  
export default MyNav;

Y este es el componente principal que tiene un componente MyNav

//App.js <- it is still currently a .js file, I have not changed it to a .tsx
import React from 'react';
import MyNav from './MyNav';
import {HashRouter, Switch, Route} from 'react-router-dom';
import DashboardPage from './DashboardPage';

function App() {
  //...

  return (
    <div className="app">
      <HashRouter>
        <MyNav />
        <Switch>
          <Route path="/">
            <DashboardPage
              {/*various props being passed*/}
            />
          </Route>
        </Switch>
      </HashRouter>
    </div>
  );
}


export default App;

Y el error que obtengo al convertir MyNav.tsx:

[tsl] ERROR en C:\Users\kde-embed-soft-dev\Projects\kde-origin-connect\src\MyNav.tsx(28,5) [0] TS2769: Ninguna sobrecarga coincide con esta llamada. [0] La última sobrecarga dio el siguiente error. [0] Argumento de tipo '{ bg: string; expand: "lg"; __self: undefined; __source: { fileName: string; lineNumber: number; columnNumber: number; }; }' no es asignable al parámetro de tipo 'Attributes & NavbarProps'. [0] Un literal de objeto puede especificar solo propiedades conocidas, y '__self' no existe en el tipo 'Attributes & NavbarProps'.

La primera línea me dice el número de línea al que debería ir a mirar, pero señala una línea que parece absurda en términos de señalar el error real.

Más información sobre la configuración de mi proyecto, todavía estoy aprendiendo sobre webpack, pero he puesto las reglas para buscar archivos .ts y .tsx para usar con ts-loader así como tomar archivos .js en un source-map-loader loader (aunque no estoy viendo ningún archivo .map en ninguna parte de mi proyecto).

He configurado un archivo tsconfig.json básico que se ve así:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": false,
    "jsx": "react",
    "outDir": "./dist/",
    "noImplicitAny": false,
    "sourceMap": true,
    "mapRoot": "./dist",
    "types": ["node"],
    "baseUrl": "./"
  },
  "exclude": ["dist", "node_modules", "user_data", "scripts"],
  "include": ["src", "electron"]
}

y las dev-dependencies para tipos se ven así en mi archivo package.json:

//package.json
{
//...
  "devDependencies": {
    "@types/node": "^14.14.14",
    "@types/react": "^17.0.0",
    "@types/react-bootstrap": "^0.32.25",
    "@types/react-dom": "^17.0.0",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.6",
    "electron": "^10.1.3",
    "electron-builder": "^22.8.1",
    "electron-devtools-installer": "^3.1.1",
    "electron-rebuild": "^2.0.3",
    "react-test-renderer": "^17.0.0",
    "ts-loader": "^8.0.12",
    "typescript": "^4.1.3",
    "webpack-cli": "^4.1.0"
  }
}

Comencé con módulos tipo hoja, archivos que no dependen de otros. Luego pasé a un módulo que tenía una dependencia y los mensajes de error se volvieron vagos, con números de línea de error que no coincidían con mi archivo, o incluso más allá del total de líneas en el archivo. Entiendo (o tal vez no) que el error debe referirse al archivo tsx compilado, pero no puedo encontrar/saber dónde existe ese archivo en mi proyecto.

Pregunta

1. ¿Por qué no puedo usar componentes de React de bibliotecas como React Bootstrap, es decir, qué me faltó/hice completamente mal para resolver el error de coincidencia de sobrecarga? No entiendo qué representa __self en el mensaje de error.
2. ¿Por qué estoy obteniendo el número de línea incorrecto con los mensajes de error, qué podría no haber hecho correctamente o haber pasado por alto al habilitar TypeScript en mi aplicación Electron CRA expulsada?
3. Al configurar webpack, ¿voy a tener problemas al agregar loaders como lo hice cuando el CRA expulsado ya tiene loaders de babel/u otros?

Gracias por tu tiempo y esfuerzo.