Q: Tooltip with custom children component not working in next.js I have a custom Tooltip component and I am trying to pass NextLink as a children.
My issue is that I am getting an error like the following.
Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Tooltip)`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead?

Custom Tooltip component
const CustomTooltip: FC<CustomTooltip> = ({
  open,
  onClose,
  placement = "left-end",
  width = 300,
  children,
  title = '',
  ...rest
}) => {
   ...
   return (
    <Tooltip
      {...rest}
      open={open}
      arrow
      onClick={onClose}
      placement={placement}
      title={
        <Box component="span" p={1} width={width}>
          <IconButton size="small">
            <CloseIcon />
          </IconButton>
          <Box my={2} px={4}>
            <Typography my={2}>
              {title}
            </Typography>
            <FormControlLabel control={<Checkbox defaultChecked />} label="Don't show again" />
          </Box>
        </Box>
      }
    >
      {children}
    </Tooltip>
  );
};

import NextLink from 'next/link';

                ...
                <CustomTooltip
                  title="Custom title"
                  open={true}
                  onClose={handleClose}
                >
                  <NextLink
                    href="/dashboard"
                    passHref
                  >
                    <Button
                      component="a"
                      href="/dashboard"
                      startIcon={<PlusIcon fontSize="small" />}
                      variant="contained"
                    >
                      Add
                    </Button>
                  </NextLink>
                </CustomTooltip>

Please not that my project is running on Next.js and TypeScript.


A: I think you should add children as prop in CustomTooltip component:
const CustomTooltip: FC<CustomTooltip> = ({ children)}

