Creé una nueva aplicación React JS utilizando la plantilla de proyecto de Visual Studio 2022 "Plantilla de JavaScript independiente React"

Cuando ejecuto el proyecto, veo el logotipo de reacción como cuando usa "create-react-app" (supongo que Visual Studio 2022 crea el proyecto de la misma manera)

Quiero usar Bootstrap en mi proyecto, así que instalé el módulo yendo al directorio raíz del proyecto y escribiendo "npm install bootstrap". Puedo ver que el módulo está instalado en el paquete.json

Cuando intento importar bootstrap en mi index.js usando esta línea:

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

Luego ejecute la aplicación. Me sale este 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/

Mi pregunta es cuál es la forma correcta de importar y usar bootstrap en mi proyecto, ¿lo instalé de la manera correcta o hay un método diferente?

Este es mi archivo index.js completo para mayor claridad:

 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();

ACTUALIZACIÓN: Ver estructura del proyecto