:Hover problem in React, not cover all div

:hover not cover all div, this images represent my problem.
I need the :hover to cover the whole blue circle

enter image description here

my code:

In index.

return (
        <Container>
            <LogoContainer>
                <ButtonContainer>
                    <ButtonIcon alt='' src={HamburguerIcon} />
                </ButtonContainer>
                <img
                    style={{ cursor: 'pointer', width: '100px' }} 
                    alt=''
                    src={Logo}
                />
            </LogoContainer>
        </Container>
    )
}

In style.

export const ButtonContainer = styled.div`
    background-color: blue;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    :hover {
            background-color: gray;
    }
`;

I try :hover in the ButtonContainer but only ButtonIcon div is covered by :hover