Media queries on Javascript isnt working here

Why isn’t the @media query working here?
how to fix it?
What’s wrong with the media queries?

const Size = {
  laptop: "1024px",
  laptopL: "1440px"
}

const Device = {
  laptop: `only screen and max-width: ${Size.laptop}`,
  laptopL: `only screen and max-width: ${Size.laptopL}`,
};

const GlobalStyle = createGlobalStyle `
  body{
    background: url(${BackgroundImage}) no-repeat center center/100% 100% fixed;
  }
  @media ${Device.laptop} {
    body{
      background-size: cover;
    }
  }
`;