MultiValue and MultiValueLabel not clickable on mobile browser

I try to add a link to the MultiValueLabel area, I use cusome MultiValueLabel, and add the link to the MultiValueLabel, it works fine in the desktop browser, but it doens't work on the mobile browser

the code:

const ContactValueLabel = props => {
  const { data:{contact_id}, children } = props;
  
  return (
      <components.MultiValueLabel {...props}>
        <a rel="noopener noreferrer"  href={`/contacts/info/${contact_id}`} target="_blank">{children}</a>
      </components.MultiValueLabel>
  );
};

<AsyncSelect
      isMulti
      cacheOptions
      defaultOptions
      openMenuOnFocus
      openMenuOnClick={false}
      components={
        { Option: ContactOption, MultiValueLabel: ContactValueLabel }
      }
      getOptionLabel={(option) => (`${option.first_name} ${option.last_name}`)}
      getOptionValue={(option) => (option.id)}
      loadOptions={promiseOptions}
    />

Reproduce the custom MultiValueLabel example with AsyncSelect and the nested link in a mobile browser, then compare its interaction with desktop behavior. Trace the MultiValueLabel and link event handling to identify why the link is not clickable on mobile; done when the provided link activates reliably on mobile without breaking desktop behavior.