React Tooltip Target ID

How do you set a target ID to be used with the tooltip? Similar to the non-react version. This is to limit repeating the same tooltip.

Non-React Version

<button **data-tooltip-target="tooltip-default"** type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>

<div **id="tooltip-default"** role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

React Version Doesn't work like this.

      <Tooltip target="tooltip-default">
        <Button>Default tooltip</Button>
      </Tooltip>

      <div id="tooltip-default" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
            Tooltip content
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>

Start with the React Tooltip component and its target prop, then compare its API with the non-React data-tooltip-target example in the issue. Determine the intended way to reuse one tooltip across targets and make the React example work without repeated tooltip content; verify the resulting component behavior.