How to integrate startbootstrap into a react component?

I’m working on a React component that incorporates a StartBootstrap template from this link.Here is the full picture of an ideal page:

enter image description here

After downloading the template and opening the index.html file, I see the HTML structure looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Dashboard - SB Admin</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.min.css" rel="stylesheet" />
        <link href="css/styles.css" rel="stylesheet" />
        <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
    </head>
    <body class="sb-nav-fixed">
        <!-- All the dashborad elements in this page -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="js/scripts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
        <script src="assets/demo/chart-area-demo.js"></script>
        <script src="assets/demo/chart-bar-demo.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>
        <script src="js/datatables-simple-demo.js"></script>
    </body>
</html>

My main challenge lies in organizing the CSS, JavaScript, and assets within my React project to ensure the template renders correctly. Below is how I structured the assets:

enter image description here

As shown in the image, I’ve included the CSS and JS files like this:

<link rel="stylesheet" href="%PUBLIC_URL%/start-bootstrap-assets/css/style.css" />
<script src="%PUBLIC_URL%/start-bootstrap-assets/js/script.js"></script>

However, despite my efforts, the HTML page appears broken as below picture:
enter image description here

So, i think, still some js are not properly addressed in my project.

Can anyone guide me on how to properly set up these assets in my React app to achieve the desired layout?

Link to full code in Github to reproduce this problem!