Why these arrow buttons are not positioning to left and right

Question

I want these two left and right arrow buttons to be positioned left and right depending upon the props passed.

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;

I am passing left and right as props to styled components but this is not working.

Answer 1

Provide props to the Arrow component not the left arrow and right arrow.

        <Arrow direction="left">
            <ArrowBackIosSharpIcon  />
        </Arrow>
        <Arrow direction="right">
            <ArrowForwardIosSharpIcon  />
        </Arrow>