Estoy usando reaccionar sensible para crear consultas de medios para que cambie el tamaño de una imagen. Sin embargo, no está haciendo lo que quiero. Mantiene la primera imagen más grande en la pantalla y no cambia a la otra con las reglas que especifiqué. ¿Hay una forma diferente de codificar esto?

importar Reaccionar, {Componente} de 'reaccionar'; importar MediaQuery desde 'react-responsive'

 class Name extends Component { render(){ return( <> <div> <MediaQuery Nameimg={this.props.Nameimg} minWidth={900}> <img height="15vh" className="name_image" src={this.props.Nameimg} alt="name"/> </MediaQuery> <MediaQuery Nameimg={this.props.Nameimg} maxWidth={899}> <img height="8vh" className="name_image2" src={this.props.Nameimg} alt="name2"/> </MediaQuery> </div> </> ) } } export default Name;