Максимальная высота анимации с черными линиями на googleChrome

Question

Здравствуйте, по какой-то причине у меня возникает следующая проблема с левой панелью с выпадающим списком (только chrome):

проблема с GIF:

но на firefox работают нормально, как этот гиф, и там нет черных линий:

я использую реакцию + эмоция js но это проблема css

мой код jsx:

const Drop = ({ active, isOpen, dropItems, setVisible, Icon }) => {
  return (
    <OpenedStyled active={active}>
      {dropItems.map(item => (
        <li className="li-open" key={item.Name}>
          <Icon />
          <a>{item.Name}</a>
        </li>
      ))}
    </OpenedStyled>
  );
};
const MenuTags = () => {
  const [menuItems, setMenuItems] = useState(SideBarTags);
  const showHideDropItem = tag => {
    setMenuItems(items =>
      items.map(item => ({
        ...item,
        Active:
          item.Name === tag.Name ? (tag.Active === true ? false : true) : false
      }))
    );
  };
  const clickHandler = tag => () => {
    showHideDropItem(tag);
  };
  return (
    <DashMenu>
      <MenuList>
        {menuItems.map((item, index) => (
          <ListItem>
            <ListWrap
              onClick={
                item.Active !== undefined
                  ? clickHandler(item)
                  : () => {
                      // foo is safely hidden within initialize, but...
                      console.log("a", item);
                    }
              }
            >
              <a>
                <item.Icon size={18} />
                <span className="li-name">{item.Name}</span>
              </a>
            </ListWrap>
            {item.DropdownItems ? (
              <Drop
                active={item.Active}
                dropItems={item.DropdownItems}
                Icon={item.Icon}
                setVisible={clickHandler}
              />
            ) : (
              ""
            )}
          </ListItem>
        ))}
      </MenuList>
    </DashMenu>
  );
};

мой Css код:

export const DashMenu = styled.div`
  display: flex;
  flex-direction: column;
`;
export const MenuList = styled.ul`
  font-family: "Ubuntu";
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
  color: #fff;
  padding-top: 10px;
`;

export const ListItem = styled("li")`
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
  cursor: pointer;
`;

export const ListWrap = styled.div`
  padding: 12px 20px 12px 20px;
  display: flex;
  transition: background 1s;
  justify-content: space-between;
  ${props => {
    if (props.active) {
      return css`
        border-left: 3px solid orange;
        background: ${shade(0.4, "#3c8dbc")};
        :hover,
        :active {
          background: ${shade(0.4, "#3c8dbc")};
        }
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
      `;
    }
  }}
  a {
    display: flex;
    align-items: center;
    svg {
      margin-right: 10px;
    }
  }
  & .icon-li {
    margin-right: 10px;
  }
  & .down-up_svg,
  .li-name {
    display: space-between;
  }
`;

export const OpenedStyled = styled.ul`
  ${props => {
    if (props.active) {
      return css`
        max-height: 400px !important;
      `;
    }
  }}
  max-height: 0;
  overflow: hidden;
  padding: 0;
  background: #307096;
  -webkit-transition: max-height 0.5s;
  -moz-transition: max-height 0.5s;
  -ms-transition: max-height 0.5s;
  -o-transition: max-height 0.5s;
  transition: max-height 0.5s;
  li {
    white-space: nowrap;
    padding: 7px 15px;
  }
  a {
    font-family: "Ubuntu";
    font-size: 14px;
    font-weight: 300;
    text-decoration: none;
    color: #fff;
  }
  & .li-open:hover > .icon-li-drop {
    color: orange;
    transition: color 1s;
  }
  & .icon-li-drop {
    margin-right: 10px;
  }
`;

на компоненте OpenedStyled У меня есть раскрывающийся список анимации maxheight

пример работы над:

https://codesandbox.io/s/keen-stonebraker-pmmxd?file= / src / styleled. js: 3996-4008