A custom styled MUI tooltip component with body (JavaScript)

muiCustomToolTip.tsx

import React from "react";
import ReactDOM from "react-dom";
import { Tooltip, Popper, TooltipProps } from "@mui/material";
import { styled } from "@mui/material/styles";

const StyledPopper = styled(Popper)({
  padding: "1rem", // offset for larger arrow size

  "& .MuiTooltip-tooltip": {
    backgroundColor: "white",
    // border: "1px solid lightgrey", // can't style arrow border :(
  },
  "& .MuiTooltip-tooltipArrow, & .MuiTooltip-popperArrow, & .MuiTooltip-arrow":
    {
      color: "white",
      fontSize: "3rem", // larger arrow size
    },
  "& .MuiTooltip-tooltipArrow > * > *": {
    fontSize: "1rem", // normal inner contents size
  },
});

interface Body {
  body: JSX.Element;
  children: JSX.Element | JSX.Element[];
}

export default function CustomTooltip({
  body,
  children,
  ...props
}: Partial<TooltipProps> & Body) {
  return (
    <Tooltip PopperComponent={StyledPopper} {...props} title={body}>
      {children}
    </Tooltip>
  );
}