How to click on anchor tags inside React dropdown

I have a dropdown & I need to use this dropdown multiple places in same page.

My issue: after open any dropdown I'm not able to click on dropdown links. When I'm trying to click then dropdown is disappearing.

Code Sandbox

See https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue/57630197#57630197

Add the onMouseDown event on the a component and call e.preventDefault().

import React, { useState } from 'react';

const Dropdown = () => {
	const [actionIsOpen, setActionIsOpen] = useState<boolean>(false);

	const actionList = [
		{ id: '1', name: 'One' },
		{ id: '2', name: 'Two' },
		{ id: '3', name: 'Three' },
		{ id: '4', name: 'Four' },
	];

	const handleActionClick = () => {
		setActionIsOpen((prev) => !prev);
	};

	return (
		<>
			<div className="tw-relative">
				<span onClick={handleActionClick} onBlur={() => setActionIsOpen(false)} className="tw-cursor-pointer">
					<button>Dropdown Click</button>
				</span>
				{actionIsOpen && (
					<div className="shadow tw-w-48 tw-absolute tw-top-2 tw-z-50 tw-left-4 tw-bg-white tw-pt-2">
						{actionList.map((val: any) => (
							<div
								key={val.id}
								className="tw-bg-white-100 hover:tw-bg-violet-100 hover:tw-text-violet-900 tw-cursor-pointer hover:tw-font-bold py-2 px-3 tw-text-gray-600">
								<a href="#" onMouseDown={(e) => e.preventDefault()}>
									{val.name}
								</a>
							</div>
						))}
					</div>
				)}
			</div>
		</>
	);
};

export default Dropdown;

codesandbox