Material UI Switch vertical instead of horizontal

I'm using Switch from Material UI in my code and am wondering if it is possible to make it go vertical instead of horizontal? I plan on using the app on my phone mainly and it would fit better if it could switch to vertical while on mobile.

Here is my code for my component:

const useStyles = makeStyles((theme) => ({
    fabDiv: {
        position: 'absolute',
        top: theme.spacing(15),
        right: theme.spacing(2),
        padding: '0.2rem',
        textShadow: '0.06rem 0.06rem #000000',
        fontFamily: 'PT Sans Caption',
        boxShadow: '0rem 0.1rem 0.1rem #006bb3',
        borderRadius: '0.6rem',
        background: '#00BFFF',
        color: '#F8F8F8'
    },
    [theme.breakpoints.down('sm')]: {
        fabDiv: {
            
        }
    }
}));

const theme = createTheme({
    components: {
      MuiSwitch: {
        styleOverrides: {
          switchBase: {
            // Controls default (unchecked) color for the thumb
            color: "#F8F8F8"
          },
          colorPrimary: {
            "&.Mui-checked": {
              // Controls checked color for the thumb
              color: "#F8F8F8"
            }
          },
          track: {
            // Controls default (unchecked) color for the track
            opacity: 0.6,
            backgroundColor: "#F8F8F8",
            ".Mui-checked.Mui-checked + &": {
              // Controls checked color for the track
              opacity: 0.6,
              backgroundColor: "#F8F8F8"
            }
          }
        }
      }
    }
  });

const WeightConverter = (props) => {
    const {
        onChange,
        checked
    } = props;
    const classes = useStyles();
    
    return (
        <ThemeProvider theme={theme}>
            <div className={classes.fabDiv} >
            lb
            <Switch 
                checked={checked}
                onChange={onChange}
                >  
            </Switch>
            kg
            </div> 
        </ThemeProvider>   
    )
};

export default WeightConverter;

I believe I should be using [theme.breakpoints.down('sm')] to trigger the change when switching to mobile view, or smaller screen.

I tried looking through the material ui and the info they had to offer on Switch, but there didn't seem to be an option. Does anyone know if this is possible? If it is not I will figure something else out but figured I'd ask.

Here is a screenshot of what the app looks like on a laptop screen:

And on mobile view:

As you can see on mobile view the fabDiv switches to vertical but the Switch still goes horizontal. My goal is to have that Switch go vertical. Any ideas?

I think we can use the way to rotate the switch component 90deg. css code is transform: "rotate(90deg)" so we can update the useStyle like following.

const useStyles = makeStyles((theme) => ({
    fabDiv: {
        position: 'absolute',
        top: theme.spacing(15),
        right: theme.spacing(2),
        padding: '0.2rem',
        textShadow: '0.06rem 0.06rem #000000',
        fontFamily: 'PT Sans Caption',
        boxShadow: '0rem 0.1rem 0.1rem #006bb3',
        borderRadius: '0.6rem',
        background: '#00BFFF',
        color: '#F8F8F8'
    },
    switchStyle: {
       transform: rotate(0deg);
    },
    [theme.breakpoints.down('sm')]: {
        fabDiv: {
            
        },
        switchStyle: {
           transform: rotate(90deg);
        }
    }
}));

...
return (
    <ThemeProvider theme={theme}>
        <div className={classes.fabDiv} >
        lb
        <Switch 
            checked={checked}
            onChange={onChange}
            className={classes.switchStyle}
        >  
        </Switch>
        kg
        </div> 
    </ThemeProvider>   
)