MUI自定义IOSSwitch添加onChange事件后滑动动画失效求助

使用Material UI自定义的IOSSwitch组件，原本滑动动画正常，但添加onChange事件处理器控制开关的checked值后，滑动动画不再生效。尝试给父元素添加过渡效果也未解决问题，当前使用的是@material-ui/core包。

代码示例：

const IOSSwitch = styled((props) => (
    <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple onChange={props.onChange && props.onChange} checked={props.checked && props.checked} {...props} />
  ))(({ theme }) => ({
    width: 40,
    height: 20,
    padding: 0,
    '& .MuiSwitch-switchBase': {
      padding: 0,
      margin: 3,
      transition: 'all 300ms !important',
      '&.Mui-checked': {
        transform: 'translateX(18px)',
        color: '#fff',
        '& + .MuiSwitch-track': {
          backgroundColor: theme.palette.mode === 'dark' ? '#227BFF' : '#227BFF',
          opacity: 1,
          border: 0,
        },
        '&.Mui-disabled + .MuiSwitch-track': {
          opacity: 0.5,
        },
      },
      '&.Mui-focusVisible .MuiSwitch-thumb': {
        color: '#33cf4d',
        border: '6px solid #fff',
        filter: "drop-shadow(0px 2px 3px rgba(17, 23, 34, 0.14))"
      },
      '&.Mui-disabled .MuiSwitch-thumb': {
        color:
          theme.palette.mode === 'light'
            ? theme.palette.grey[100]
            : theme.palette.grey[600],
      },
      '&.Mui-disabled + .MuiSwitch-track': {
        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
      },
    },
    '& .MuiSwitch-thumb': {
      boxSizing: 'border-box',
      width: 14,
      height: 14,
    },
    '& .MuiSwitch-track': {
      borderRadius: 26 / 2,
      backgroundColor: theme.palette.mode === 'light' ? '#D3D5DA' : '#D3D5DA',
      opacity: 1,
      transition: theme.transitions.create(['background-color'], {
        duration: 500,
      }),
    },
  }));

// 调用开关组件
<IOSSwitch onChange={handleTemplateActiveSwitch} checked={isTemplateActive} />

经过排查，问题根源是项目中同时存在两个版本的Material UI，移除Material UI Core v4版本后，开关的滑动动画恢复正常。

内容的提问来源于stack exchange，提问作者Nayeem M. Muzahid