diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 80c999e3..e0b53517 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -27,6 +27,7 @@ import React, { JSX, isValidElement, cloneElement, + useMemo, } from "react"; import classNames from "classnames"; @@ -163,15 +164,22 @@ function TooltipAnchor({ children }: Readonly): JSX.Element { const childrenRef = (children as unknown as { ref?: Ref })?.ref; const ref = useMergeRefs([context.refs.setReference, childrenRef]); - if (!isValidElement(children)) { + // We need to check `isValidElement` to infer the type of `children` + const childrenProps = isValidElement(children) && children.props; + + const element = useMemo(() => { + if (!isValidElement(children)) return; + + const props = context.getReferenceProps({ + ref, + ...childrenProps, + }); + return cloneElement(children, props); + }, [ref, children, childrenProps]); + + if (!element) { throw new Error("Tooltip anchor must be a single valid React element"); } - return cloneElement( - children, - context.getReferenceProps({ - ref, - ...children.props, - }), - ); + return element; }