ReactTooltip - react-tooltip anchor is not showing up

Question

ReactTooltip anchor is not showing up when I'm hovering on the element. The tooltip is visible but the anchor is not getting displayed.

I'm using a previous version of ReactTooltip - 4.2.21

import "./ProgressChartTooltip.scss";
import ReactTooltip from "react-tooltip";
import TextDisplay from "../../../../../../chat/TextDisplay/TextDisplay";
import coin from "../../../../../../../assets/icons/coin.svg";

export function ProgressChartTooltip() {
  return (
    <div>
      <div data-tip data-for="preview">
        ◕
      </div>
      <ReactTooltip
        id="preview"
        place="top"
        effect="float"
        backgroundColor="#D8D8DF"
        className="stTooltip"
      >
        {/* question preview */}
        <div className="quesPreview">
          <TextDisplay text="Laborum in ipsum veniam et voluptate eiusmod irure ut voluptate velit officia. Ex aute elit commodo exercitation consectetur ad. Proident laboris ad dolor laborum." />
        </div>
        {/* unit info */}
        <div className="unitInfo">
          <div className="unitTitle">
            Expressions, Equations, and Inequalities
          </div>
          <div className="unitDesc">
            Solve area and perimeter problems (algebraic)
          </div>
          <div className="unitProgress">
            {/* unit completion progress */}
            {/* Attempted or not - progress chart icon */}
            <div>0/4 complete | Not tried</div>
          </div>
        </div>
        {/* display coins */}
        <button className="coinButton">
          <img src={coin} alt="coin-icon" className="coinIcon" />
          <span className="coins">400</span>
        </button>
      </ReactTooltip>
    </div>
  );
}

This is how I want :

And this is how it is getting displayed. NO ANCHOR TIP:

How can I get the ANCHOR tip displayed????