Cuando intento importar Glyphicon desde 'react-bootstrap', aparece el siguiente error de importación. 'Error de importación intentado: 'Glyphicon' no se exporta desde 'react-bootstrap'. Revisé muchos recursos para diagnosticar este error. Cada método utilizado termina en falla y además aparece el error anterior. Todavía me pregunto qué está causando este 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;