I got a hovering div with text in it, when I hover on the actual div it works, but when I hover on the text inside of it the hover stops

Question

When I hover on LayerOne, its opacity changes from 0 to 1, but when I hover on ProjectName or ProjectDate the hover stops and all LayerOne disappears with the text. I want the opacity to be 0 only when I make mouseLeave on LayerOne. There is other items with the same structure as ItemOne but I excluded them here to make the code simple

`Styles`
const LayerOne = styled.a`
    top:0;
    left:0;
    z-index:2;
    width:100%;
    height:100%;
    color:#fff;
    cursor:pointer;
    border-radius:5px;
    position:absolute;
    text-decoration:none;
    transition:0.2s linear;
    background-color:#000000bd;
    opacity:${({isHoveredOne}) => isHoveredOne ? '1' : '0'};
`

const ProjectName = styled.div`
    
`

const ProjectDate = styled.div`
    
`

`The function`
export default function Portfolio() {
    const [isHoveredOne, setIsHoveredOne] = useState(false);
    const HoverHandlerOne = () => {
        setIsHoveredOne(!isHoveredOne);
    }
  return(
        <PortfolioSection id="portfolio">
            <PortfolioContainer>
                <Heading>Portfolio</Heading>
                <PortfolioWrapper>
                    <ItemOne>
                        <Img src={ImgOne}/>
                        <LayerOne isHoveredOne={isHoveredOne} onMouseOver={HoverHandlerOne} 
                        onMouseLeave={HoverHandlerOne} href="">
                            <ProjectName isHoveredOne={isHoveredOne}>Social Media</ProjectName>
                            <ProjectDate isHoveredOne={isHoveredOne}>25/09/2021</ProjectDate>
                        </LayerOne>
                    </ItemOne>
                </PortfolioWrapper>
            </PortfolioContainer>
        </PortfolioSection>
  );
}