Repository: nextui-org/nextui
File: packages/components/tooltip/src/tooltip.tsx (TypeScript)

Code before:
    const childrenNum = Children.count(children);

    if (childrenNum !== 1) throw new Error();

    if (!isValidElement(children)) {
      trigger = <p {...getTriggerProps()}>{children}</p>;
    } else {
      const child = children as React.ReactElement & {
        ref?: React.Ref<any>;
      };

      // Accessing the ref from props, else fallback to element.ref
      // https://github.com/facebook/react/pull/28348
      const childRef = child.props.ref ?? (child as any).ref;

      trigger = cloneElement(child, getTriggerProps(child.props, childRef));
    }
  } catch (error) {
    trigger = <span />;
    warn("Tooltip must have only one child node. Please, check your code.");
  }

  const {ref: tooltipRef, id, style, ...otherTooltipProps} = getTooltipProps();

  const animatedContent = (
    <div key={id + "-tooltip-content"} ref={tooltipRef} id={id} style={style}>
      <m.div
        key={id + "-tooltip-inner"}
        animate="enter"
        exit="exit"
        initial="exit"
        variants={TRANSITION_VARIANTS.scaleSpring}
        {...mergeProps(motionProps, otherTooltipProps)}
        style={{
          ...getTransformOrigins(placement),
        }}
      >
        <Component {...getTooltipContentProps()}>{content}</Component>
      </m.div>
    </div>
  );

  return (
    <LazyMotion features={domAnimation}>
      {trigger}
      {disableAnimation ? (
        isOpen && (
          <OverlayContainer portalContainer={portalContainer}>
            <div ref={tooltipRef} id={id} style={style} {...otherTooltipProps}>
              <Component {...getTooltipContentProps()}>{content}</Component>
            </div>

Review comment (suggestion):
prefer the following instead of using `+`. (apply to other keys)

```tsx
key={`${id}-tooltip-content`}
```

Code after:
    const childrenNum = Children.count(children);

    if (childrenNum !== 1) throw new Error();

    if (!isValidElement(children)) {
      trigger = <p {...getTriggerProps()}>{children}</p>;
    } else {
      const child = children as React.ReactElement & {
        ref?: React.Ref<any>;
      };

      // Accessing the ref from props, else fallback to element.ref
      // https://github.com/facebook/react/pull/28348
      const childRef = child.props.ref ?? (child as any).ref;

      trigger = cloneElement(child, getTriggerProps(child.props, childRef));
    }
  } catch (error) {
    trigger = <span />;
    warn("Tooltip must have only one child node. Please, check your code.");
  }

  const {ref: tooltipRef, id, style, ...otherTooltipProps} = getTooltipProps();

  const animatedContent = (
    <div key={`${id}-tooltip-content`} ref={tooltipRef} id={id} style={style}>
      <m.div
        key={`${id}-tooltip-inner`}
        animate="enter"
        exit="exit"
        initial="exit"
        variants={TRANSITION_VARIANTS.scaleSpring}
        {...mergeProps(motionProps, otherTooltipProps)}
        style={{
          ...getTransformOrigins(placement),
        }}
      >
        <Component {...getTooltipContentProps()}>{content}</Component>
      </m.div>
    </div>
  );

  return (
    <>
      {trigger}
      {disableAnimation ? (
        isOpen && (
          <OverlayContainer portalContainer={portalContainer}>
            <div ref={tooltipRef} id={id} style={style} {...otherTooltipProps}>
              <Component {...getTooltipContentProps()}>{content}</Component>
            </div>