Cannot hide images under fixed div - css

Question

Images are visible from underneath fixed div and I cannot hide them. Tried with z-index but didn't rly work. It looks like only image is visible from underneath since div in which these images are mapped cannot be seen. What is causing the problem?
styles of component with fixed div (MenuPopUp)
export const MenuWrapper = styled.div``;
export const IconWrapper = styled.div<{
isActive: boolean;
isDarkMode: boolean;
}>`
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: ${(props) =>
guessIconBgColor(props.isActive, props.isDarkMode)};
border-radius: 50%;
cursor: pointer;
&:hover {
background-color: ${pallete.DarkerGray};
}
svg {
height: 20px;
color: ${(props) => guessIconColor(props.isActive, props.isDarkMode)};
}
`;
export const MenuPopUp = styled.div`
position: fixed;
width: 675px;
height: 672px;
right: 16px;
background-color: ${pallete.LightGray};
border-radius: 0 0 4px;
-webkit-box-shadow: 6px 6px 15px -7px rgba(66, 68, 90, 1);
-moz-box-shadow: 6px 6px 15px -7px rgba(66, 68, 90, 1);
box-shadow: 6px 6px 15px -7px rgba(66, 68, 90, 1);
`;
styles of images
export const UserStoryWrapper = styled.div`
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: 100%;
border-radius: 8px;
overflow: hidden;
`;
export const Image = styled.img<{ isOverlay: boolean }>`
height: 100%;
width: 100%;
scale: ${(props) => (props.isOverlay ? "1.05" : "1")};
transition: 0.3s ease-in-out;
`;
export const Overlay = styled.div<{ isOverlay: boolean }>`
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0);
opacity: ${(props) => (props.isOverlay ? "0.3" : "0")};
cursor: pointer;
`;
styles of images container
export const UserStoriesWrapper = styled.div`
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
height: 200px;
`;