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;

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

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

Your Line component is a square :

  position: absolute;
  inset: 10px;

Because without a explicit width and a height, a box in a absolute position with have inferred width from left and right properties, and inferred height from the top and bottom properties, so relative to the first parent with a absolute, relative, fixed or sticky positioning.

-> Line parent is the <div className="square"> element.
So Line will be square.

The reel line is the Line before pseudo element :

    position: absolute;
    width: 100%;
    height: 4px;

And without positioning (top, bottom, left, right), it will start from the top left corner of the first positioned parent.

-> So Every Line component is a transparent square with a green line on top.
When you rotating the square by 90°, the line follows, keeping the same position relative to the square.

If you want it to form a cross :

You can center the speudo element in the Line component, for exemple just add :

  display: flex;
  justify-content: center;
  align-items: center;

In the CSS of the Line component.