I created a new React JS app using the Visual Studio 2022 Project Template "Standalone JavaScript React Template"

When I run the project I see the react logo just like when you use "create-react-app" (I'm assuming that Visual Studio 2022 creates the project in the same way)

I want to use Bootstrap in my project so I installed the module by going to the root directory of the project and typing "npm install bootstrap" I can see that the module is installed in the package.json

When I try and import bootstrap in my index.js using this line:

import "/bootstrap/dist/css/bootstrap.min.css";

Then run the app I get this error:

Module not found: Error: You attempted to import /bootstrap/dist/css/bootstrap.min.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
    You can either move it inside src/, or add a symlink to it from project's node_modules/

My question is what is the correct way to import and use bootstrap in my project, did I install it in the right way or is there a diffrent method?

This is my full index.js file for clarity:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "/bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

UPDATE: See sctructure of project