En mi aplicación React, quiero usar un ReactTooltip alrededor de mi componente, de modo que el contenido de la información sobre herramientas sea un texto con un enlace a otro sitio web. Mi componente tiene un return como este:

 return ( <> <div className="col-xs-6 col-sm-4" > <Link to={earnnestLink(deal)} target="_blank" data-tip={'abc<br /> def </br> ghi <a href="www.google.ca"/>'} > Request Escrow Funds </Link> </div> <ReactTooltip multiline html id="earnnest-link-tooltip" place="bottom" border effect="solid" type="light" className="custom-tooltip-large" /> </> )

Mi ReactTooltip provino de import ReactTooltip from 'react-tooltip'

Pero entonces mi interfaz de usuario se ve así

Entonces tengo 2 preguntas:

1. ¿Cómo hago para que el enlace a www.google.ca se muestre correctamente? Tenga en cuenta que el HTML para <br /> se representó, pero el HTML para el vínculo no se representa.
2. Tan pronto como alejo el cursor del texto "Solicitar fondos de depósito en garantía" en la información sobre herramientas con la intención de hacer clic en el enlace incrustado, la información sobre herramientas desaparece. Creo que es porque mi cursor está fuera del componente <Link> . ¿Cómo hago para que permanezca allí mientras muevo el cursor a la información sobre herramientas?

¡Gracias!