为什么我的 react-bootstrap 按钮导入不起作用？

Question

我使用以下命令安装了 react-bootstrap（如 文档中所述）：

npm install react-bootstrap bootstrap@4.6.0

我继续按如下方式导入它：

import { Input } from "antd";
import Button from "react-bootstrap/Button";

我使用它如下：

<Input
    placeholder="Placeholder"
/>
<Button>Sign Up</Button>

但是，添加按钮会破坏页面。 当按钮被移除时它工作正常。 有人可以帮我吗？

这是控制台的屏幕截图： Console

这是整个代码片段：

import React from "react";
import "antd/dist/antd.css";
import { Input } from "antd";
import { Button } from "react-bootstrap";
import _ from "lodash";
import "bootstrap/dist/css/bootstrap.min.css";

export default class SignUpPage extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            email: "",
            firstPassword: "",
            secondPassword: "",
        };
    }

    render() {
        const { username, email, firstPassword, secondPassword } = this.state;

        const confirmPasswordDisabled =
            _.get(firstPassword, ["length"], 0) === 0;

        return (
            <>
                <div
                    className="container"
                    style={{
                        margin: "auto",
                        width: "400px",
                        paddingTop: "200px",
                    }}
                >
                    <Input
                        placeholder="Username"
                        value={username}
                        onChange={(e) =>
                            this.setState({ username: e.target.value })
                        }
                        style={{
                            margin: "5px",
                        }}
                    />
                    <Input
                        placeholder="Email"
                        value={email}
                        onChange={(e) =>
                            this.setState({ email: e.target.value })
                        }
                        style={{
                            margin: "5px",
                        }}
                    />
                    <Input
                        placeholder="Password"
                        value={firstPassword}
                        type="password"
                        onChange={(e) =>
                            this.setState({ firstPassword: e.target.value })
                        }
                        style={{
                            margin: "5px",
                        }}
                    />
                    <Input
                        placeholder="Confirm Password"
                        value={secondPassword}
                        type="password"
                        onChange={(e) =>
                            this.setState({ secondPassword: e.target.value })
                        }
                        disabled={confirmPasswordDisabled}
                        style={{
                            margin: "5px",
                        }}
                    />
                    <Button color="primary">Sign Up</Button>
                </div>
            </>
        );
    }
}