Favicon not appearing on Apple devices (iPhone and iPad) using Helmet and ReactJS

Question

I'm facing an issue where the favicon for my website is not appearing on Apple devices such as iPhone and iPad. I'm using Helmet along with ReactJS for managing my website's head. Here is the code I'm using:

<Helmet>
    <meta charSet="utf-8" />
    <meta name="description" content={contact?.meta_desc || ""} />
    <meta name="keyword" content={contact?.meta_keyword || ""} />
    <title>{contact?.meta_title || ""}</title>
    <link rel="canonical" href="https://vogaon.alan.co.id" />
    <link rel="icon" href={contact?.favicon} />
    <link rel="apple-touch-icon" href={contact?.favicon} />
    <link rel="apple-touch-icon-precomposed" href={contact?.favicon} />
  </Helmet>

The favicon appears to be working on desktop and Android devices, but it's not showing up on Apple devices. Is there a specific reason why this might be happening? Are there any additional steps I need to take to ensure the favicon appears on iOS devices?

I've verified that the favicon is correctly uploaded to the server and accessible, so it seems to be a specific issue with Apple devices.

Any guidance or suggestions would be greatly appreciated. Thanks!