I'm using react responsive to create media queries so an image size will change. However, it's not doing what I want. It keeps the larger 1st image on the screen and doesn't switch over to the other with the rules I specified. Is there a different way of coding this?

import React, {Component} from 'react'; import MediaQuery from '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;