Tengo un componente Tooltip que es un contenedor para contenido dinámico.

Estoy tratando de usarlo como una ventana emergente, que tendrá los botones Eliminar y Cancelar.

Estoy pasando el botón Eliminar y Cancelar como accesorio secundario, el problema es que el estado Cerrar y Abrir está en el componente Información sobre herramientas.

Necesito adjuntar la función de cierre en el botón Cancelar que se encuentra en Children prop.

Necesito ayuda para encontrar una solución elegante a esto.

Componente de información sobre herramientas :

 export const Tooltip: FC<TooltipProps> = ({ content, helperText, children, ...props }) => { const [visible, setVisible] = useState(false); const show = () => setVisible(true); const hide = () => setVisible(false); return ( <div> <Tippy content={content} visible={visible} onClickOutside={hide} interactive {...props} > <div onClick={visible ? hide : show}> // =====>>> **Close button which be in children prop, need to attach hide() function** {children} </div> </Tippy> </div> ); };

Este es el componente Call of Tooltip y los botones de paso como hijos:

 <Tooltip content={ <div className="popover-buttons"> // Need to attach here **hide()** function from Tooltip coomponent <button> Cancel </button> <button> Delete </button> </div> </Tooltip>