Tooltip (MUI) closes when clicking on radio button inside it

I’m encountering an issue with a custom tooltip component in my React application. The tooltip contains a set of radio buttons, and whenever I click on a radio button, the tooltip closes. However, I want the tooltip to remain open so that users can make multiple selections without the tooltip closing.

I’ve tried using event.stopPropagation() in the handleChange function to prevent the click event from bubbling up to the parent elements, including the tooltip. While this prevents the tooltip from closing on the first click, it still closes after clicking on a radio button multiple times.

Here’s a simplified version of my components:

import React from 'react';
import styled from '@emotion/styled';
import { Box, FormControlLabel, Grid, Radio, RadioGroup, Tooltip, TooltipProps, Typography, tooltipClasses,} from '@mui/material';

const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    maxWidth: 750,
    maxHeight: 250,
    overflowY: 'auto',
    border: '1px solid #dadde9',
    borderRadius: 10,
    backgroundColor: 'white',
    boxShadow: '10px 10px 20px rgba(0, 0, 0, 0.5)',
    '&::-webkit-scrollbar': {
      width: '0.5em',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: 'grey',
    },
    '&::-webkit-scrollbar-track': {
      backgroundColor: 'white',
    },
  },
});

interface ShipModelProps {
  handleCellClick: () => void;
  howManyToShip: number;
}

const ShipModel = ({ handleCellClick, howManyToShip }: ShipModelProps) => {
  const [selectedValue, setSelectedValue] = React.useState('Ocean');  
  
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.stopPropagation();
    setSelectedValue(event.target.value);
  };

  const tooltipContent = (
    <Box component={'div'} className="text-black flex flex-col items-center" width={300}>
      <h1 className="text-lg font-bold">Ship Model</h1>
      <Box component={'div'}>
        <h4 className="text-sm opacity-50">Shipment Type</h4>
        <RadioGroup aria-label="ship-model" value={selectedValue} onChange={handleChange}>
          <Grid container spacing={2}>
            <Grid item xs={6}>
              <FormControlLabel
                value="Ocean"
                control={<Radio />}
                label={<Typography variant="body2">Ocean</Typography>}
              />
              <FormControlLabel value="Air" control={<Radio />} label={<Typography variant="body2">Air</Typography>} />
            </Grid>
            <Grid item xs={6}>
              <FormControlLabel
                value="Ocean Express"
                control={<Radio />}
                label={<Typography variant="body2">Ocean Express</Typography>}
              />
              <FormControlLabel
                value="Air Express"
                control={<Radio />}
                label={<Typography variant="body2">Air Express</Typography>}
              />
            </Grid>
          </Grid>
        </RadioGroup>
      </Box>
      <Box component={'div'} className="border-t-2" width={'100%'}>
        <h4 className="text-sm opacity-50">Optional</h4>
        <FormControlLabel control={<Radio />} label={<Typography variant="body2">Optional</Typography>} />
      </Box>
    </Box>
  );

  return (
    <CustomWidthTooltip title={tooltipContent} onClick={handleCellClick}>
      <Box component={'div'}>
        {howManyToShip}
      </Box>
    </CustomWidthTooltip>
  );
};

export default ShipModel;

via GIPHY

I want the tooltip to remain open even after clicking on a radio button multiple times. How can I achieve this behavior? Any suggestions or insights would be greatly appreciated.
Thank you!