How to change opacity of backgroundImage using "INLINE CSS" in react project without affecting the text on the image

Question

I am trying to render a map on screen and some text on the map using inline css in react, and i want to decrease the opacity of the image so that the text become more readable

<div
          
          style={{
            backgroundImage: `url(${country.countryInfo.flag})`,
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
          }}
        >
          <div></div>
          <div>{country.country}</div>
          <div>Cases:{numeral(country.cases).format('0,0')}</div>
          <div>Recovered:{numeral(country.recovered).format('0,0')}</div>
          <div>Deaths:{numeral(country.deaths).format('0,0')}</div>
          <div>Sagar Bhatia</div>
        </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>