Tooltip does not work when its children component is a custom component

[carolvalenca]

Problem

Utilizando o componente Tooltip recentemente notei que quando o componente encapsulado no Tooltip é customizado (importado de outro arquivo ou até mesmo estando no mesmo arquivo mas sendo separado em outra função), o Tooltip não aparece.

Expected behavior

Quando houver o hover em um componente encapsulado no Tooltip, o Tooltip é mostrado em tela.

Reproducible Example

https://codesandbox.io/p/sandbox/6s4hp5

Suggested solution

No response

Additional context

Estou utilizando localmente a versão 1.5.0 do @vtex/shoreline e no snippet do CodeSandbox a versão 1.9.10. Em ambas versões o erro acontece.

Package

@vtex/shoreline

Packages version

No response

Browser

Chrome

Package Manager

pnpm

[lucasaarcoverde]

oii @carolvalenca, o Tooltip utiliza a referência pra posicionar o popover, por isso é necessário utilizar um forwardRef ao criar o custom component

https://codesandbox.io/p/sandbox/6s4hp5

em typescript ficaria assim

import { Button } from "@vtex/shoreline";
import "@vtex/shoreline/css";
import { Ref, forwardRef } from "react";

const CustomButton = forwardRef(function CustomButton(props: ButtonProps, ref: Ref<HTMLButtonElement>) {
  return (
    <Button {...props} ref={ref}>
      Custom button imported from another file
    </Button>
  );
});

export default CustomButton;

[davicostalf]

@carolvalenca A resposta de lucas responde seu problema?