When I try to import Glyphicon from 'react-bootstrap' I get below import error. 'Attempted import error: 'Glyphicon' is not exported from 'react-bootstrap'. I looked through a lot of resources to diagnose this error. Every method used ends in failure and further the above error appears. I still wonder what is causing this error.

import React, { Component } from "react";
import "./App.css";
import {
  FormGroup,
  FormControl,
  InputGroup,
  Glyphicon,
} from "react-bootstrap";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: "",
    };
  }

  search() {
    console.log("this.state", this.state);
  }
  
  render() {
    return (
      <div className="App">
        <div className="App-title">Music search</div>
        <FormGroup>
          <InputGroup>
            <FormControl
              type="text"
              placeholder="Search for an artist"
              query={this.state.query}
              onChange={(event) => {
                this.setState({ query: event.target.value });
              }}
              onKeyPress={(event) => {
                if (event.key === "Enter") {
                  this.search();
                }
              }}
            />
          </InputGroup>
          <InputGroup.Addon>
            <Glyphicon glyph="search" />
          </InputGroup.Addon>
        </FormGroup>
        <div className="Profile">
          <div>Artist Picture</div>
          <div>Artist name</div>
        </div>
        <div className="Gallery"></div>
      </div>
    );
  }
}

export default App;