Favicon not applied in safari

Question

I'm applying the favicon using React Helmet Async on the Bun js dev server, and I'm trying to apply the favicon file to Safari as an ico file. But safari doesn't work. However, Chrome, Firefox, and Edge work just fine.

However, when I apply the favicon in index.html, it works properly in safari. Safari not reading React Helmet Async's dynamic favicon changes?

Here is my React Helmet Async application code.

import IcoFavicon from 'assets/favicon.ico';
import SvgFavicon from 'assets/favicon.svg';
import { Helmet } from 'react-helmet-async';

<Helmet>
  <link rel="icon" href={IcoFavicon} />
  <link rel="icon" href={SvgFavicon} />
  ...
</Helmet>

I also used favicon.ico in index.html but it didn't work in both chrome and safari.

So I applied it in React Helmet Async.

Here is my old Index.html code.

...
<link rel="icon" href="/favicon.ico" /> // I've tried both %PUBLIC_URL%/favicon.ico and ./favicon.ico as well as this path.
...