transform shows old and new position instead of only new one - css

Question

the transform works fine, but not only the new positions of the dashes are shown also the old positions are shown on click.
i want the horizontal dashes to disappear on transform.
open === false
open === true
what I expect on open === true
const StyledBar = styled.span`
width: 2rem;
height: 0.25rem;
background: ${({ theme }) => theme.colors.primary};
border-radius: 10px;
transition: all 0.3s linear;
position: relative;
transform-origin: 1px;
`;
const StyledBurgerButton = styled.button`
position: absolute;
top: 24px;
right: 24px;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 2rem;
height: 2rem;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 10;
${StyledBar} {
:first-child {
transform: ${({ open }) => (open ? "rotate(45deg)" : "rotate(0)")};
}
:nth-child(2) {
opacity: ${({ open }) => (open ? "0" : "1")};
transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
}
:nth-child(3) {
transform: ${({ open }) => (open ? "rotate(-45deg)" : "rotate(0)")};
}
}
`;
const BurgerButton = ({ open, setOpen }) => {
return (
<StyledBurgerButton open={open} onClick={() => setOpen(!open)}>
<StyledBar />
<StyledBar />
<StyledBar />
</StyledBurgerButton>
);
};