How to use react-bootstrap in viteJs?

React-bootstrap doesn't seem to work with vite. When I try, react-bootstrap styles are not working.

Here, for example, is my App.jsx which kicks off my application.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import Button from 'react-bootstrap/Button'
import Accordion from 'react-bootstrap/Accordion';

function App() {

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>

      <Button variant="primary">Primary</Button>{' '}
      <Button variant="secondary">Secondary</Button>{' '}
      <Button variant="success">Success</Button>{' '}
      <Button variant="warning">Warning</Button>{' '}
      <Button variant="danger">Danger</Button>{' '}
      <Button variant="info">Info</Button>{' '}

<!-- more markup removed -->
     
    </div>
  )
}

export default App

Here is a stackblitz Code Link, which will help you understand the issue better in context.

I am expecting React-bootstrap styles to appear properly, but it doesn't happen.