Bootstrapが効かない

Reactでサイトを作成しようとしています。

学習サイトを見ながら、Bootstrapを設定してみたのですが、
適用されていません。

やったこと:
index.htmlファイルにタグを追加。
環境にnpm install bootstrapは実行しました。

上記で、不足や確認すべき箇所がありましたら、ご指摘いただけますと助かります。

Bootstrapのタグを設定したindex.htmlファイル

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <title>Test site</title>
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8  <link rel="stylesheet" href="/css/styles.css">
9
10  <!-- Bootstrap CSS -->
11  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
12
13
14</head>
15
16<body>
17  <div id="app"></div>
18
19  <!-- Bootstrap Javascript(jQuery) -->
20  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
21  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
22  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
23
24
25
26</body>
27
28</html>
29

Bootstrapが効いて欲しいページ

React
1import React, { useState, useEffect } from 'react';
2import { Link } from 'react-router-dom';
3import {BsArrowRepeat} from "react-icons/bs";
4export default function SignUp({user, setUser, token, setToken, loggedInUser, setLoggedInUser}) {
5
6
7  useEffect(() => {
8		if (window.localStorage.getItem('token')) {
9			setToken(window.localStorage.getItem('token'));
10			setLoggedInUser(window.localStorage.getItem('loggedInUser'));
11		}
12	}, []);
13
14  const handleChange = e => {
15		setUser({ ...user, [e.target.name]: e.target.value });
16	};
17
18  const handleSignUp = async e => {
19		try {
20			const response = await fetch('', {
21				method: 'POST',
22				headers: {
23					'Content-Type': 'application/json'
24				},
25				body: JSON.stringify(user)
26			});
27			const data = await response.json();
28			console.log(data);
29			setToken(data.token);
30			setLoggedInUser(data.user.email);
31			window.localStorage.setItem('token', data.token);
32			window.localStorage.setItem('loggedInUser', data.user.email);
33			//for the local storage so they don't have to log in every time it refreshes
34		} catch (error) {
35			console.error(error);
36		}
37	}
38
39  return (
40    <div className="SignUpComponent">
41    <div className="form-div form-floating mb-3 container">
42        <h1 className="h3 mb-3 fw-normal">Sign Up</h1>
43
44        <div className="mb-3 form-floating row">
45          <form className="signup-form row">
46            <div className="mb-3 pl-2  form-floating col-md-6">
47              <input
48                type="text"
49                name="username"
50                value={user.username}
51                onChange={handleChange}
52                className="form-control"
53                id="floatingUsername"
54                placeholder="Username"
55              />
56              <label htmlFor="floatingFirstName">Username:</label>
57            </div>
58              <div>
59                <span>This is the name that will be shown in your messages. Please
60                protect your privacy! Do not use your own name or a username that
61                you use on other forums or social media.</span>
62              </div>
63            <p>----- or -----</p>
64            <button>Randomly Generate<BsArrowRepeat/></button>
65
66            <div className="mb-3 pl-2 form-floating col-md-6">
67              <input
68                type="text"
69                name="email"
70                value={user.email}
71                onChange={handleChange}
72                className="form-control"
73                id="floatingEmail"
74                placeholder="Email"
75              />
76              <label htmlFor="floatingEmail">Email:</label>
77            </div>
78
79            <div className="mb-3 pl-2 form-floating col-md-6">
80              <input
81                type="text"
82                name="email"
83                value={user.email}
84                onChange={handleChange}
85                className="form-control"
86                id="floatingEmail"
87                placeholder="Email"
88              />
89              <label htmlFor="floatingEmail">Confirm Email:</label>
90            </div>
91
92            <div className="mb-3 pl-2 form-floating col-md-6">
93              <input
94                type="text"
95                name="password"
96                value={user.password}
97                onChange={handleChange}
98                className="form-control"
99                id="floatingPasscode"
100                placeholder="Password"
101              />
102              <label htmlFor="floatingPassword">Password</label>
103            </div>
104            <div className="col-auto">
105            <span id="passwordGuidelines" className="form-text">
106              Password must have at least 8 characters and contain at least two of
107              the following: uppercase letters, lowercase letters, numbers, and
108              symbols.
109            </span>
110          </div>
111
112          <div className="mb-3 pl-2 form-floating col-md-6">
113          Date of Birth:
114           <input
115             type="text"
116             name="Month"
117             value="month"
118             onChange={handleChange}
119             className="form-control"
120             id="floatingMonth"
121             placeholder="Month"
122            />
123            <label htmlFor="floatingMonth">Month</label>
124
125           <input
126             type="text"
127             name="Day"
128             value="day"
129             onChange={handleChange}
130             className="form-control"
131             id="floatingDay"
132             placeholder="Day"
133            />
134            <label htmlFor="floatingDay">Day</label>
135
136           <input
137             type="text"
138             name="Year"
139						 value="year"
140             onChange={handleChange}
141             className="form-control"
142             id="floatingYear"
143             placeholder="Year"
144            />
145           <label htmlFor="floatingYear">Year</label>
146          </div>
147
148          <div>
149          <input
150            type="checkbox"
151          />
152          <span>I confirm, the above username isn't my real name and I don't
153          use it on other forums or social media.
154          </span>
155          </div>
156
157          <div>
158            <span>Yellow and Blue make what color?</span>
159            <input
160              type="text"
161              name="Verification"
162              onChange={handleChange}
163              className="form-control"
164              id="floatingVerification"
165              placeholder="Varification"
166            />
167             <label htmlFor="floatingVerification">Verification:</label>
168          </div>
169
170          <div>
171            <span>*Required Information</span>
172          </div>
173          <p>By continuing, you agree to <Link to="/home">Terms of Use</Link> and <Link to="/home">Privacy Policy</Link>.</p>
174          </form>
175        </div>
176
177        <div className="mb-3">
178          <button
179            type="submit"
180            value="Register"
181            className="btn btn-success mb-3"
182            onClick={handleSignUp}
183          >
184            Sign Up
185          </button>
186        </div>
187      </div>
188    </div>
189  )
190
191};
192