How can Typescript correctly infer generics in react component props?

Just for context, I'm creating a component that shows a Tooltip if the child element is overflowing. children prop is a render function so whoever calls this component can assign the RefObject to whichever ref prop of the child component it wants (i.e.: ref, itemRef, inputRef,..), as well as the event that should be called onMouseEnter.

import { TooltipProps } from '@mui/material';

export type OverflowTooltipProps = Omit<TooltipProps, 'children'> & {
	children: <RefElem extends HTMLElement>(
		ref: RefObject<RefElem>,
		onMouseEnter: () => void
	) => ReactElement;
};

const OverflowTooltip = <RefElem extends HTMLElement>(props: OverflowTooltipProps) => {
	const { children, disableHoverListener, ...other } = props;
	const [overflowing, setOverflowing] = useState(false);
	const childrenRef = useRef<RefElem>(null);

	const testIfOverflowing = () => {
		const scrollWidth = childrenRef.current?.scrollWidth;
		const clientWidth = childrenRef.current?.clientWidth;
		if (scrollWidth && clientWidth) {
			setOverflowing(scrollWidth > clientWidth);
		}
	};

	useEffect(() => {
		testIfOverflowing();
		window.addEventListener('resize', testIfOverflowing);
		return () => window.removeEventListener('resize', testIfOverflowing);
	}, [children]);

	return (
		<Tooltip disableHoverListener={disableHoverListener || !overflowing} {...other}>
			{children<RefElem>(childrenRef, testIfOverflowing)}
		</Tooltip>
	);
};

This is a (simplified) use case:

<OverflowTooltip title={attachment.file.name}>
	{(ref, onMouseEnter) => (
		<Chip ref={ref} label={attachment.file.name} onMouseEnter={onMouseEnter} />
	)}
</OverflowTooltip>

However, I get the following error:

What am I doing wrong? Shouldn't this be inferred correctly because of the generics being used?

You actually have to pass generic into to type also. Here you have working solution:

import { Chip, Tooltip, TooltipProps } from "@mui/material";
import { ReactElement, RefObject, useEffect, useRef, useState } from "react";

export type OverflowTooltipProps<RefElem extends HTMLElement> = Omit<
  TooltipProps,
  "children"
> & {
  children: (ref: RefObject<RefElem>, onMouseEnter: () => void) => ReactElement;
};

const OverflowTooltip = <RefElem extends HTMLElement>(
  props: OverflowTooltipProps<RefElem>
) => {
  const { children, disableHoverListener, ...other } = props;
  const [overflowing, setOverflowing] = useState(false);
  const childrenRef = useRef<RefElem>(null);

  const testIfOverflowing = () => {
    const scrollWidth = childrenRef.current?.scrollWidth;
    const clientWidth = childrenRef.current?.clientWidth;
    if (scrollWidth && clientWidth) {
      setOverflowing(scrollWidth > clientWidth);
    }
  };

  useEffect(() => {
    testIfOverflowing();
    window.addEventListener("resize", testIfOverflowing);
    return () => window.removeEventListener("resize", testIfOverflowing);
  }, [children]);

  return (
    <Tooltip
      disableHoverListener={disableHoverListener || !overflowing}
      {...other}
    >
      {children(childrenRef, testIfOverflowing)}
    </Tooltip>
  );
};

const attachment = {
  file: {
    name: "test",
  },
};

const App = () => {
  <OverflowTooltip<HTMLDivElement> title={attachment.file.name}>
    {(ref, onMouseEnter) => (
      <Chip
        ref={ref}
        label={attachment.file.name}
        onMouseEnter={onMouseEnter}
      />
    )}
  </OverflowTooltip>;
};