Why My React Bootstrap Typeahead style is all wrong?

Question

This is my typeahead Down here is my code, I open a new project of react and use typeahead to creat a select input, but its style in selected parts do not show any of it, how can fix it?

// App.js
import Test from './test'
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="App">
      <Test />
    </div>
  );
}

export default App;

// test.js
import React, { useState } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';

const Example = () => {
  const [selected, setSelected] = useState([]);

  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  return (
    <Typeahead
      id="basic-typeahead-example"
      labelKey="name"
      onChange={setSelected}
      options={options}
      placeholder="Choose an option..."
      selected={selected}
      multiple
    />
  );
};

export default Example;

This is how i expect it will looks like

Answer 1

The typeahead library also has CSS you need to import. Be sure to include the following in your code:

import 'react-bootstrap-typeahead/css/Typeahead.css';

// If using Bootstrap 5 include the following:
import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';