Ось вращения () css

Я сослался на код в другом месте и, следуя коду, он делает квадратную зеленую линию.
Но я думаю, что код должен делать крест, а не квадрат.

Если я запускаю код, он делает квадрат, как на картинке ниже.

Кажется, что все линии имеют разные оси вращения.
Не могли бы вы объяснить мне, почему получается не крест, а квадрат?

код:

import styled from "styled-components";

export default function App() {
  const array = [0, 1, 2, 3];

  return (
    <Wrap>
      <div className = "container">
        <div className = "square">
          {array.map((idx) => {
            return <Line number = {idx} />;
          })}
        </div>
      </div>
    </Wrap>
  );
}

const Wrap = styled.div`
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background: #111;

  .container {
    border: 3px solid orange;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container .square {
    top: 200px;
    left: 200px;
    border: 1px solid blue;
    position: absolute;
    width: 200px;
    height: 200px;
  }
`;

const Line = styled.span`
  border: 1px solid red;
  position: absolute;
  inset: 10px;
  transform: ${(props) => `rotate(calc(90deg * ${props.number}))`};

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background: #0f0;
  }
`;

КодПесочница https://codesandbox.io/s/zigzag-f2uybc?file=/src/App.js:0-1864