In my React App I want to use a ReactTooltip around my component such that the content of the tooltip is some text with a link to another website. My component has a return like this:

  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" />
    </>
  )

My ReactTooltip came from import ReactTooltip from 'react-tooltip'

But then my UI looks like this

So I have 2 questions:

1. How do I get the link to www.google.ca show up properly? Note that the HTML for <br /> was rendered but the HTML for the link is not rendered.
2. As soon as I move the cursor away from the text "Request Escrow Funds" into the tooltip with the intention to click on the embedded link, the tooltip disappears. I think it's because my cursor is outside of the <Link> component. How do I get it to stay there while I move the cursor into the tooltip?

Thanks!