Эмоция Js гамбургер анимация

Question

Здравствуйте. Я пытаюсь сделать анимацию с эмоциями. js Машинопись и редукция. По какой-то причине моя анимация не работает. Я не знаю, есть ли проблема в моем типе, потому что мое состояние работает нормально, как на изображении:

Код :

TSX :

interface RootState {
  sideBarStatus: boolean;
}

interface SideBar {
  isOpen: boolean;
}

const LogoNavigation: React.FC<SideBar> = ({ isOpen }) => {
  const dispatch = useDispatch();
  console.log(isOpen);
  return (
    <LogoSide>
      <img src={Logo} alt="Logo Elo Ghost" />
      <Hamburguer open={isOpen} onClick={() => dispatch(toggleSide(!isOpen))}>
        <div />
        <div />
        <div />
      </Hamburguer>
    </LogoSide>
  );
};

const SideNavigation: React.FC = () => {
  // const { sideIsOpen } = useSelector((RootState) => RootState.toggleSide);
  const selectIsOpen = (state: RootState) => state.sideBarStatus;
  const sideBarStatus = useSelector(selectIsOpen);
  return (
    <SideNav>
      <LogoNavigation isOpen={sideBarStatus} />
    </SideNav>
  );
};

Стили :

export const LogoSide = styled('div')`
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #fdca40;
  img {
    height: 50px;
  }
`;

export const Hamburguer = styled.button<HamburguerProps>`
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 100;
  transition: all 0.2s ease;
  &:focus {
    outline: none;
  }
  div {
    width: 1.6rem;
    height: 0.25rem;

    background: ${(props: HamburguerProps) => (props.open ? 'red' : 'pink')};
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;

    :nth-of-type(1) {
      transform: ${(props: HamburguerProps) =>
        props.open ? 'rotate(45deg)' : 'rotate(0)'};
    }

    :nth-of-type(2) {
      opacity: ${(props: HamburguerProps) => (props.open ? '0' : '1')};
      transform: ${(props: HamburguerProps) =>
        props.open ? 'translateX(20px)' : 'translateX(0)'};
    }

    :nth-of-type(3) {
      transform: ${(props: HamburguerProps) =>
        props.open ? 'rotate(-45deg)' : 'rotate(0)'};
    }
  }
`;

и мой Slice:

import { createSlice } from '@reduxjs/toolkit';

const INITIAL_STATE = {
  sideIsOpen: false,
};

const sideBar = createSlice({
  name: 'toggleSide',
  initialState: INITIAL_STATE,
  reducers: {
    toggleSide: (state, action) => {
      state.sideIsOpen = !state.sideIsOpen;
    },
  },
});

export const { toggleSide } = sideBar.actions;
export { sideBar };

в основном моя анимация не работает. Я знаю, что проблема с моим кодом стиля, как этот рисунок :

это мой пример:

https://codesandbox.io/s/great-galileo-zp3e7?file= / src /

я знаю, что проблема связана с моим реквизитом