In react import 3rd party jQuery ,CSS ,JavaScript

in react is it good to import external java script,jQuery ,css to index.htmal file in public folder. and if there is any impact to application performance.

and i used some j Query functions inside of react application. example : datepicker it's also work fine

i need to know is this way recommended ?
is this effect to application performance ?
or its not recomended & remove all external link and install dependencies with npm or yarn?
when application build how react improve performance with
node_module rather than external links ? if it hit performance.

index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="%PUBLIC_URL%/external/images/favicon-96x96.png">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link href="./external/css/iconfont/material-icons.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="./external/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./external/plugins/bootstrap-select/css/bootstrap-select.css">
    <link rel="stylesheet" href="./external/plugins/node-waves/waves.min.css">
    <link rel="stylesheet" href="./external/plugins/animate-css/animate.min.css">
    <link rel="stylesheet" href="./external/css/style.css">    
    <link rel="stylesheet" href="./external/css/custom.css">
    <link rel="stylesheet" href="./external/css/menu.css">
    <link rel="stylesheet" href="./external/css/themes/theme-white.css">
    <link rel="stylesheet" href="./external/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.standalone.css">
    <link rel="stylesheet" href="./external/css/react_table.css">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root">
    </div> 
    <script src="./external/plugins/jquery/jquery.min.js"></script>
    <script src="./external/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="./external/plugins/bootstrap-select/js/bootstrap-select.js"></script>
    <script src="./external/js/admin.js"></script>
    <script src="./external/js/pages/index.js"></script>
    <script src="./external/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
    <script src="./external/plugins/node-waves/waves.min.js"></script>
    <script src="./external/plugins/autosize/autosize.min.js"></script>
    <script src="./external/plugins/momentjs/moment.js"></script>
    <script src="./external/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
  </body>
</html>

This is not recommended for modern front-end development:

A lot of unused css and javascript code will definitely affect web performance.
- Increase javascript parse time.
- Increase file download time(Chrome has a limit of 6 connections per host name).
Since bootstrap and jQuery appear earlier than webpack, webpack works not good with them.You should consider using React-Bootstrap, antd, Material-UI etc instead of bootstrap,
When you use es6 module to introduce dependencies, webpack will only package the code used to one bundle, AKA tree shaking, and discard the unused code. You can also do some Code Splitting with webpack, which can help you load javascript code for current page only.