text: import * as React from 'react';
  import PropTypes from 'prop-types';
  import Rating from '@mui/material/Rating';
  import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
  import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied';
  import SentimentSatisfiedIcon from '@mui/icons-material/SentimentSatisfied';
  import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAltOutlined';
  import SentimentVerySatisfiedIcon from '@mui/icons-material/SentimentVerySatisfied';
  
  const customIcons = {
    1: {
      icon: <SentimentVeryDissatisfiedIcon sx={{ fontSize: '60px' }} />,
      label: 'Very Dissatisfied',
    },
    2: {
      icon: <SentimentDissatisfiedIcon sx={{ fontSize: '60px' }} />,
      label: 'Dissatisfied',
    },
    3: {
      icon: <SentimentSatisfiedIcon sx={{ fontSize: '60px' }} />,
      label: 'Neutral',
    },
    4: {
      icon: <SentimentSatisfiedAltIcon sx={{ fontSize: '60px' }} />,
      label: 'Satisfied',
    },
    5: {
      icon: <SentimentVerySatisfiedIcon sx={{ fontSize: '60px' }} />,
      label: 'Very Satisfied',
    },
  };
  
  function IconContainer(props) {
    const { value, ...other } = props;
    return <span {...other}>{customIcons[value].icon}</span>;
  }
  
  IconContainer.propTypes = {
    value: PropTypes.number.isRequired,
  };
  
  export default function RadioGroupRating({ rating, setrating }) {
    return (
      <Rating
        sx={{ mt: 2 }}
        name="highlight-selected-only"
        value={rating}
        IconContainerComponent={IconContainer}
        highlightSelectedOnly
        onChange={(event, newValue) => {
          setrating(newValue);
        }} 
      />
    );
  }