svg & react icons rotation - how do i rotate elements by 90 degrees anticlockwise

Hello there i am trying to create a seat map layout mostly using react icons and svg, below is code sample of the "seat" component

const Seat = ({ seat, rowIndex, seatIndex, height, width, fill, onClick }) => {
  const initialX = 200;
  const initialY = 70;
  const xOffset = seatIndex * 20;
  const yOffset = rowIndex * 20;
  return !seat.id ? null : (
    <>
      <svg
        x={initialX + xOffset}
        y={initialY + yOffset}
        height={24}
        width={16}
        onClick={onClick}
        style={{ cursor: "pointer" }}
      >
        <MdEventSeat y={8} />
        <rect x={0} y={0} width={16} height={24} stroke={fill} fill="none"  />
        <text
          x={0}
          y={8}
          textAnchor="start"
          style={{ fontSize: "0.7rem", fontWeight: "bold" }}

        >
          {seat.id}
        </text>
      </svg>
    </>
  );
};`

i tried using things like "transform="rotate(100)"for the "rect" and "style = {{transform:'rotate(90deg)' for the seat icon itself but unable to have it render properly post rotation

Edit: included images of current and expected output below

original

expected