Checkout Extension -- Modal/overlay in tooltip not working.

[Schmidtc63]

I have a tool tip that includes a link. The link is supposed to show a modal when it is clicked but within the tooltip, it it is not showing the modal. Outside the tooltip, the exact same code works.

function createTooltipComponent(root, ui) {
	const ppmodalFragment = root.createFragment();
	const ppmodal = root.createComponent(
		Modal,
		{id: 'package-protection-info-modal', title: 'Package Protection More Info', padding: true},
		[
			root.createComponent(
				TextBlock,
				undefined,
				'More info on package protection',
			),
			root.createComponent(
				TextBlock,
				undefined,
				'More info2 on package protection',
			),
			root.createComponent(
				Button,
				{
					onPress() {
						ui.overlay.close('package-protection-info-modal');
					},
				},
				'Close',
			),
		],
	);
	ppmodalFragment.appendChild(ppmodal);
	root.appendChild(ppmodalFragment);
	const tooltipFragment = root.createFragment();
	const link = root.createComponent(
		Link,
		{
			overlay: ppmodalFragment,
			onPress: () => {
				console.log('link clicked');
			},
		},
		'More Info'
	);
	const tooltip = root.createComponent(
		Tooltip,
		{},
		[
			`We've got you covered! By opting in to our package protection, you will be ensured that your package will arrive to you in excellent condition or your money back!<br>KicKee's package protection covers lost, stolen or damaged packages.`,
			link
		]
	);

	tooltipFragment.appendChild(tooltip);
	const pressable = root.createComponent(
		Pressable,
		{
			overlay: tooltipFragment,
			onPress: () => console.log('onPress event'),
		},
		[
			root.createComponent(Icon, {source: 'questionFill'}),
		],
	);
	return pressable;
}

I know the link is working because I get the console.log statement. Also, if I add "to: https://google.com" to the properties of the link, it works.

How do I make the overlay work in this case? 

Thank you