изображение непрозрачно, но не должно

Question

У меня есть изображение на оверлее, которое непрозрачно, но не должно.

Я использую Styled Components и React. Я установил непрозрачность наложения на 0,6, но ничего не настроил для изображения:

const ZoomedImage = ({ image }) => {
  return (
    <Backdrop>
      <IconContainer>
        <CancelIcon icon="close" />
      </IconContainer>
      <ImageContainer>
        <Image src={image} />
      </ImageContainer>
    </Backdrop>
  )
}

export default ZoomedImage;


import styled from "styled-components"
import Icon from "../../primitives/icon"

export const IconContainer = styled.div`
  display: flex;
  justify-content: flex-end;
  margin-top: -25px;
`

export const ImageContainer = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
`

export const CancelIcon = styled(Icon)`
  fill: white;
  width: 44px;
  z-index: 1000;
  cursor: pointer;
`

export const Image = styled.img`
  z-index: 1000;
  max-width: 70vw;
  opacity: 1 !important;
  background-color: black;
`


import styled from "styled-components"

const Backdrop = styled.div`
  display: flex;
  background-color: black;
  opacity: 0.6;
  height: 100%;
  width: 100vw;
  padding: 5%;
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
`

export default Backdrop

Кто-нибудь знает, что я делаю неправильно? А может, я чего-то не вижу?