MUI TypeError: Cannot read properties of undefined (reading 'name')

Question

I'm trying to migrate from jss to emotion and while running codemod on this code, I got an error message like this. Transformation error (Cannot read properties of undefined (TypeError: Cannot read properties of undefined (reading 'name')

This code is not using any theme and zIndex and opacity are passed to props properly. But I still get this error. Here is the code.

import React from 'react';
import makeStyles from '@mui/styles/makeStyles';

const useStyles = makeStyles({
  swipeBackground: {
    width: '240px',
    height: '0',
    position: 'relative',
    top: '-42px',
    overflow: 'visible',
    zIndex: props => props.zIndex || 0
  },
  swipeBackgroundInner: {
    textAlign: 'right',
    color: '#fff',
    display: 'block',
    height: '42px',
    width: '100%',
    backgroundColor: '#71B6BC',
    top: '42px',
    position: 'relative',
    opacity: props => props.opacity || 0
  },
  iconStyles: {
    position: 'relative',
    top: '7.5px'
  }
});

const SwipeWrapper = props => {
  const { children, icon } = props;

  const classes = useStyles({ ...props });

  return (
    <>
      {children}
      <div className={classes.swipeBackground}>
        <div className={classes.swipeBackgroundInner}>
          <div className={classes.iconStyles}>{icon}</div>
        </div>
      </div>
    </>
  );
};

export default SwipeWrapper;

I tried to fix that but not sure what is the cause of this error.