如何让MUI淡入淡入渲染？

import React, { useState } from 'react';
import { Button } from '@mui/material';
import './styles.css';

const FadeInFadeOutExample = () => {
  const [isVisible, setIsVisible] = useState(false);

  const handleToggle = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <Button variant="contained" onClick={handleToggle}>
        Toggle
      </Button>
      <div className={`fade-in-out ${isVisible ? 'visible' : 'hidden'}`}>
        {/* MUI组件内容 */}
        <Button variant="contained">Hello, MUI!</Button>
      </div>
    </div>
  );
};

export default FadeInFadeOutExample;

.fade-in-out {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in-out.visible {
  opacity: 1;
}

.fade-in-out.hidden {
  opacity: 0;
}