Bootstrap Dropdown doesn't expand

Question

I'm using react-bootstrap dropdown but it doesn't expand. I can see the class change to open in dev tools but it doesn't open in the browser.

I followed the solution posted on here, but it doesn't help me. I also followed the solution posted here, but it still doesn't work. Also the console doesn't give me any errors when I click on the drop-down. Any help is appreciated.

(Also this is not the entire code but just the relevant code)

    import React, { Component } from 'react';
    import Table from 'react-bootstrap/lib/Table';
    import Button from 'react-bootstrap/lib/Button';
    import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
    import DropdownButton from 'react-bootstrap/lib/DropdownButton';
    import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
    import MenuItem from 'react-bootstrap/lib/MenuItem';

    class ListBooks extends Component {
      render(){

        showingBooks.sort(sortBy('title'))
        return(
          <div className="list-books">
            <div className="list-books-title">
              <h1>BookReads</h1>
            </div>
            <input type="text"
              placeholder="Search by title or author"
              value={this.state.query}
              onChange={(event) => this.updateQuery(event.target.value)}
              className="search-field"
              />
            <div className="list-books-content">
              <div>
                <Table striped bordered hover>
                  <thead>
                    <tr>
                      <th className="book-header">Book</th>
                      <th className="book-header">Author</th>
                      <th className="book-header"> Shelf </th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>{showingBooks.map((book)=>(
                      <tr key={book.id}>
                        <td className="bookShelfTable">                      
                          <div> {book.description} </div>
                        </td>
                        <td>
                          <div> {book.authors} </div>
                        </td>
                        <td>{this.shelfName(book)}</td>
                        <td>
                          <ButtonToolbar>
                            <DropdownButton title="Default button" id="dropdown-size-medium">
                              <MenuItem eventKey="1">Action</MenuItem>
                              <MenuItem eventKey="2">Another action</MenuItem>
                              <MenuItem eventKey="3">Something else here</MenuItem>
                              <MenuItem divider />
                              <MenuItem eventKey="4">Separated link</MenuItem>
                            </DropdownButton>
                          </ButtonToolbar>
                          <div> <i className="fa fa-times" onClick={() => this.props.onDeleteBook(book)}/></div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </Table>
              </div>
            </div>
          </div>
        )
      }
    }

    export default ListBooks