In my app, I use MUI React Library to render a custom ToolTip using Card and Accordion components. The Tooltip displays on hover.

The problem is that in the Tooltip, the Accordion components are not expanding. I nearly copied the MUI API demo (https://codesandbox.io/s/6o0jzg?file=/demo.js:375-1699), so I think extra CSS.

See below my code and photo of the non-expandable ToolTip:

const CustomTooltip = ({ payload }: TooltipProps<ValueType, NameType> | any) => {

    if( payload && payload.length){
      var idTarget = [];
      let idTargetData: any = payload[0].payload.id;
      for(let i = 0; i < idTargetData.length; i++){
        for(let j = 0; j<idTargetData[i].length; j++){
          idTarget.push(
          <Accordion>
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls="panel1a-content"
              id={Object.keys(idTargetData[i][j]).toString()}
            > 
            <Typography sx={{ fontSize: 14 }} color={"white"} >
            id : {Object.keys(idTargetData[i][j]).toString()}
          </Typography> 
            </AccordionSummary>
            <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </Typography>
        </AccordionDetails>
          </Accordion>
)
        }
      }
      return (
        <>
        <Card sx={{ minWidth: 12, backgroundColor: "white"}}>
          <CardContent>
            {idTarget}            
          </CardContent>
        </Card>
        </>
      );
    }
    return null;
  }

//later in code

return(
    <Tooltip content = {<CustomTooltip/> } labelStyle={{ color: "black" }} />

);