styled-componentsでmedia queryが使えない

Question

styled-componentsを使ったmediaqueryの指定がうまくいきません。
User.tsxで450pxより小さい場合にMediaGridItemのmediaQueryが呼ばれるように記述しているのですがデベロッパーツールで確認したところclassNameはMediaGridItemのclassNameとなっているのですが指定したgrid-auto-flow: row;は記述されていませんでした。
どうやってmediaqueryを適応させてあげればいいのでしょうか？
わかる人いましたらご教授お願いしたいです。

import React, { FunctionComponent } from "react";
import styled from "styled-components";

const Item = styled.div<{ theme: any }>`
  display: inline-block;
  grid-column: ${({ theme }) => theme.column};
  grid-row: ${({ theme }) => theme.row};
`;
type Props = {
  theme: any;
  className?: string;
};

export const GridItem: FunctionComponent<Props> = ({
  theme,
  children,
  className,
}) => {
  return (
    <Item theme={theme} className={className}>
      {children}
    </Item>
  );
};

import { GridItem } from "components/GridItem";
import React, { FunctionComponent } from "react";
import styled from "styled-components";

const Grid = styled.div`
  display: grid;
  height: 150px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
`;

const MediaGridItem = styled(GridItem)`
  @media (max-width: 450px) {
    grid-auto-flow: row;
  }
`;

type Props = {
  name: string;
  img: string;
};

export const User: FunctionComponent<Props> = ({
  name,
  img,
}) => {
  return (
    <Grid>
      <GridItem theme={{ column: "1/2", row: "1/12" }}>
      </GridItem>
      <GridItem theme={{ column: "2/5", row: "2/3" }}>
      </GridItem>
      <GridItem theme={{ column: "2/5", row: "3/4" }}>
      </GridItem>
      <MediaGridItem theme={{ column: "6/10", row: "7/9" }}>
          {name}
      </MediaGridItem>
      <MediaGridItem theme={{ column: "10/11", row: "7/9" }}>
        <img src="images/test.svg" />
      </MediaGridItem>
    </Grid>
  );
};