Axis of rotate() of css

I refered the code elsewhere and following the code, it’s making a green line square.
But I think the code has to make a cross not the square.

If I run the code it makes the squre lik the picture below

It seems that all lines have different rotation axis.
Can you let me know why it’s not making a cross but square?

code:

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;

  .contatiner {
    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;
  }
`;

CodeSandBox
https://codesandbox.io/s/zigzag-f2uybc?file=/src/App.js:0-1864