react+expressにてInvalid hook callの解決方法を教えてください。

前提・実現したいこと

react+expressにてnavbarを実装しようとしている最中に以下のエラーメッセージが発生してしまいました。プログラミング初心者のため、基本的なところが間違っているかもしれません。何かお気づきの点があれば指摘してもらえると嬉しいです。

発生している問題・エラーメッセージ

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

該当のソースコード

APP.js
import React from "react";
import {
    Button,
    Navbar,
    Nav,
    NavDropdown,
    Form,
    FormControl
} from 'react-bootstrap';

class FirstComponent extends React.Component {
    render(){
        return (
            <Navbar bg="light" expand="lg">
                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link href="#home">Home</Nav.Link>
                        <Nav.Link href="#link">Link</Nav.Link>
                        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                    <Form inline>
                        <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                        <Button variant="outline-success">Search</Button>
                    </Form>
                </Navbar.Collapse>
            </Navbar>
    )};
}

export default FirstComponent;

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import FirstComponent from './App';

ReactDOM.render(
  <FirstComponent/>,
  document.getElementById('root')
);
reportWebVitals();

試したこと

npmの再インストール、エディタの再起動、検索にて見つかった解決方法を試しました。しかし改善されずどうにもできない状態です。どうかよろしくお願いします。

補足情報（FW/ツールのバージョンなど）

ディレクトリ構造
app/backend/index.js
--- /frontend/src
---------------/public
---------------/package.json①
---------------/node_modules
/packagejson②
/node_modules
①
"dependencies": {
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
②
"dependencies": {
"bootstrap": "^5.0.0",
"eslint-config-prettier": "^8.3.0",
"express": "^4.17.1",
"prettier": "^2.3.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0"
},

hoshi-takanori

2021/05/15 19:20

特に問題なく動きましたけど…。

yusei__001100

2021/05/15 20:14

試してくださり、ありがとうございます。こちらではエラーが起きてしまうのですが何か追記すべき要素などありませんでしょうか

hoshi-takanori

2021/05/15 20:22

よく分かりませんが、react-bootstrap とかは frontend の package.json に書くべきでは。というか、プロジェクトのトップレベルに backend 用の node_modules があり、frontend サブディレクトリにまた node_modules があるのが良くないのかも？ (想像ですが…。)

yusei__001100

2021/05/15 20:56

frontend下のnode_modulesを消し、react-bootstrap,bootstrapをfrontendにインストールし直してみました。その結果再度同じnode_modulesができてしまいました。さらにnode_modulesのフォルダの色が、黒くなってしまいます。なお、エラーはそのままです。。よければ解答よろしくお願いします

yusei__001100

2021/05/15 21:03

再度サーバーを起動し直すことでnavberが反映されました。助かりました。ありがとうございました。