I'm attempting to develop a customHook for the MUI breakpoints right now.

The return value should depend what was entered, if possible. As an illustration, if I enter Md, I want isGreaterThanMd and if I enter XS, I want isGreaterThanXs back. Unfortunately, my plan is too straightforward and doesn't work.

import { Breakpoint, useMediaQuery, useTheme } from "@mui/material";

export const useResponsiveKey = (key: number | Breakpoint) => {
    const theme = useTheme();
    const isGreaterThan = useMediaQuery(theme.breakpoints.up(key));

    return {
        isGreaterThan: `isGreaterthan${key}`,
    };
};