为什么这些箭头按钮没有定位到左右

Question

我希望这两个左右箭头按钮根据传递的道具左右定位。

import styled from "styled-components";
import ArrowBackIosSharpIcon from '@mui/icons-material/ArrowBackIosSharp';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';

const Container = styled.div`
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
  background-color: #fff6a9;
`;

const Arrow = styled.div`
  width: 50px;
  height: 50px;
  background-color: #fff7f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;

  left: ${(props) => props.direction === "left" && "10px"};
  right: ${(props) => props.direction === "right" && "10px"};

  margin: auto;
  cursor: pointer;
  opacity: 0.5;
  z-index: 2;
`;

const Slider = () => {
    return (
        <Container>
            <Arrow>
                <ArrowBackIosSharpIcon direction="left" />
            </Arrow>
            <Arrow>
                <ArrowForwardIosSharpIcon direction="right" />
            </Arrow>
        </Container>
    );
}

export default Slider;

我将左右传递作为样式组件的道具，但这不起作用。