Error in [at-loader] when I use Typescript and react-bootstrap in webpack

I used typescript and react-bootstrap in webpack but when I use the component in react-bootstrap, it showed the error msg as follows:

    ERROR in [at-loader] ./node_modules/react-bootstrap/esm/NavbarCollapse.d.ts:4:18 
    TS2320: Interface 'NavbarCollapseProps' cannot simultaneously extend types 'Pick<CollapseProps, "className" | "role" | "in" | "onEnter" | "onEntered" | "onEntering" | "onExit" | "onExited" | "onExiting" | "mountOnEnter" | "unmountOnExit" | "appear" | "timeout" | "dimension" | "getDimensionValue">' and 'HTMLAttributes<HTMLDivElement>'.
  Named property 'role' of types 'Pick<CollapseProps, "className" | "role" | "in" | "onEnter" | "onEntered" | "onEntering" | "onExit" | "onExited" | "onExiting" | "mountOnEnter" | "unmountOnExit" | "appear" | "timeout" | "dimension" | "getDimensionValue">' and 'HTMLAttributes<HTMLDivElement>' are not identical.

I've upgraded Typescript and bootstrap-react to the latest version but the problem still cannot be solved.

Here is my code:

import React from "react";
import Navbar from 'react-bootstrap/Navbar';

export default function Navbars(){
    return (
        <div>
            <Navbar bg="dark" variant="dark">
                <Navbar.Brand href="#home">NavBar</Navbar.Brand>
            </Navbar>
        </div>
    );
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "allowSyntheticDefaultImports": true
    },
    "include": [
        "./src/**/*"
    ]
}

How can I solve this problem? thanks.