TypeScript 4 / React 18: Generating A JSON Object Of CSS Classes

Question

I have a Location component that generates a JSON object of CSS classes using useStyles, a function that is returned by makeStyles, a function from @mui/styles. A CSS class that is a value of the JSON object is passed as prop className to a TextField component. Given that @mui/styles does not work with React 18, how do I generate a JSON object of CSS classes with minimal changes to code that uses such a CSS class?

...
const useStyles = makeStyles(() =>
  createStyles({
    textField: {
      borderRadius: '2px 2px 0px 0px',
    },
    inputPadding: {
      padding: '22px 12px 10px',
    },
    inputUnderline: {
      '&::before': {
        borderBottom: `1px solid ${scssVars.rgba_dark_blue_0_2}`,
      },
      '&:hover:not(.Mui-disabled):before': {
        borderBottom: `1px solid ${scssVars.color_dark_blue}`,
      },
    },
  })
);
...
        <TextField
          id="city"
          value={city}
          label={intl.get('CITY')}
          variant="filled"
          onChange={handleCityChange}
          className={classes.textField}
          InputLabelProps={{
            className: 'text--14 text-capitalize',
          }}
          InputProps={{
            className: 'bg--white text--14',
            classes: {
              input: classes.inputPadding,
              underline: classes.inputUnderline,
            },
          }}
        />
...