I came across with this code snippet:

const breakpoints = {
  values: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1400,
  },
};

  const drawerOpenStyles = () => ({
    background: backgroundValue,
    transform: "translateX(0)",
    transition: transitions.create("transform", {
      easing: transitions.easing.sharp,
      duration: transitions.duration.shorter,
    }),

    [breakpoints.up("xl")]: {  // what does [] mean? what does .up() do? 
      boxShadow: transparentSidenav ? "none" : xxl,
      marginBottom: transparentSidenav ? 0 : "inherit",
      left: "0",
      width: sidebarWidth,
      transform: "translateX(0)",
      transition: transitions.create(["width", "background-color"], {
        easing: transitions.easing.sharp,
        duration: transitions.duration.enteringScreen,
      }),
    },
  });

On the line [breakpoints.up("xl")]: {}, I am having trouble understanding:

1. What does [] do when it wraps an object key?

2. What does Object.up() do in javascript?

I was able to print by console.log(drawerOpenStyles: ${JSON.stringify( drawerOpenStyles() )}); and I got this result:

{
   "background":"linear-gradient(195deg, #42424a, #191919)",
   "transform":"translateX(0)",
   "transition":"transform 200ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
   "@media (min-width:1200px)":{
      "boxShadow":" 0rem 1.25rem 1.6875rem 0rem rgba(0, 0, 0, 0.05)",
      "marginBottom":"inherit",
      "left":"0",
      "width":250,
      "transform":"translateX(0)",
      "transition":"width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,background-color 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
   }
}

How exactly does [breakpoints.up("xl")] give "@media (min-width:1200px)"?