React - Styled Components(beginner)

const Father = styled.div`
  display: flex;`

const Box = styled.div`
  background-color: ${(props) => props.bgColor};   //receiving props from JSX
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;`

const Circle = styled(Box)`   //getting styles from Box 
  border-radius: 50%;`

function App() {
  return (
    <Father>
      <Box bgColor="teal" />   //sending props to Components
      <Circle bgColor="tomato" />
    </Father>
  )
}

works like this..