Radio Button with materia UI

index.ts

import { Button, Radio } from '@material-ui/core';

    function renderOptions(): ReactElement[] {
    const options: ReactElement[] = [];
    for (let i = 0; i < 4; i += 1) {
      const label = i === 0 ? translate('none') : `${i} ${i === 1 ? translate('time') : translate('times')}`;
      options.push(
        <Button
          className={clsx(styles.card, { [styles.selected]: enteritisCount === i })}
          key={`option-${i}`}
          onClick={() => setEnteritisCount(i)}
        >
          <div>{label}</div>
          <Radio color="primary" checked={enteritisCount === i} />
        </Button>
      );
    }
    return options;
  }

styles.ts

import {
  createStyles,
  makeStyles
} from '@material-ui/core/styles';

const cardMargin = 5;
const cardPadding = 15;
const selectedBorderWidth = 1;

export const useStyles = makeStyles((theme) => createStyles({
  enteritisContainer: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    overflow: 'hidden'
  },
  optionsContainer: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    overflowY: 'scroll',
    margin: '0px 16px'
  },
  card: {
    margin: `${cardMargin}px`,
    padding: `${cardPadding}px`,
    borderRadius: '8px',
    boxShadow: '0px 2px 10px rgba(130, 130, 130, 0.4)',
    justifyContent: 'space-between',
    transition: 'border 0s',
    textTransform: 'none'
  },
  selected: {
    border: `${selectedBorderWidth}px solid ${theme.palette.primary.main}`,
    padding: `${cardPadding - selectedBorderWidth}px`
  }
}));