Typescript error using library react components: TS2769

I have an ejected CRA with electron that I have been trying to convert .js|.jsx files to .ts|.tsx. The steps I followed are:

1. add a tsconfig.json file to my project root directory.
2. npm install various @types/** dependencies
3. add ts-loader and source-map-loader to webpack.config.js
4. change file extension to main electron process: electron.js and renderer process: renderer.js to .ts and .tsx respectively

While I am able to run the app with npm start with just changing my main process file: electron.js to electron.ts as well as the renderer process file: renderer.js to renderer.tsx, I am unable to resolve issues and conflicts that occur when converting my other source files. The following are the steps I would do to try and convert a .js file into a .tsx file:

1. Rename .js file to a .tsx file
2. Restart the app with npm start
3. Go through and fix the typescript issues, whether compilation errors or not defining types for the type checker.

Rinse and repeat

Here is a specific problem I've encountered with various attempts to convert a .js to a .tsx source file:

//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;

And this is the parent component that has a MyNav component

//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;

And the error I get while converting MyNav.tsx:

[tsl] ERROR in C:\Users\kde-embed-soft-dev\Projects\kde-origin-connect\src\MyNav.tsx(28,5) [0] TS2769: No overload matches this call. [0] The last overload gave the following error. [0] Argument of type '{ bg: string; expand: "lg"; __self: undefined; __source: { fileName: string; lineNumber: number; columnNumber: number; }; }' is not assignable to parameter of type 'Attributes & NavbarProps'. [0] Object literal may only specify known properties, and '__self' does not exist in type 'Attributes & NavbarProps'.

The first line tells me the line number I should go look at but it points to a line that looks nonsensical in terms of pointing to the actual error.

More information on my project settings, I am still learning about webpack, but I've put in the rules to look for .ts and .tsx files to use with ts-loader as well as taking .js files into a source-map-loader loader (though I'm not seeing a .map file anywhere in my project).

I've set up a basic tsconfig.json file which looks like this:

{
  "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"]
}

and the dev-dependencies for types look like this in my package.json file:

//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"
  }
}

I started with leaf-like modules, files that don't depend on others. Then I moved on to a module that had a dependency and the error messages became vague with error line numbers that didn't match up with my file, or even past the total lines in the file. I understand (or maybe I don't) that the the error must be referring to the compiled tsx file, but I am unable to find/know where that file exists in my project.

Question

1. Why am I not able to use React components from libraries like React Bootstrap, ie, what did I miss/completely not do to solve the error of matching the overload. I do not understand what the __self represents in the error message.
2. Why am I getting the wrong line number with the error messages, what could have I not done correctly/missed in enabling typescript on my ejected CRA electron app?
3. When configuring webpack, am I going to have issues adding in loaders as I did when the ejected CRA has babel/other loaders already in?

Thank you for your time and effort.