Custom logo for breadcrumbs disappears when clicking on collection

I have a custom logo for in the breadcrumbs and on the dashboard it look wonderful, but when i click on a collection, it just disappears. I am working on payload version

Logo.tsx

/* eslint-disable no-use-before-define */
// eslint-disable-next-line import/no-extraneous-dependencies
import React from 'react'

const Icon = () => (
<svg viewBox="0 0 80.5 73.17" xmlns="http://www.w3.org/2000/svg">
    <style>{`
        .cls-1{
            fill:#5130e9;
        }
        .cls-1,.cls-2{
            fill-rule:evenodd;
        }
        .cls-2{
            fill:#b29ff2;
        }
    `}</style>
    <path className='cls-1' d="M47.5,53.28A11.93,11.93,0,0,1,37.17,71.17H12A12,12,0,0,1,1.43,53.5a.94.94,0,0,1,.12-.22L14.19,31.37a11.93,11.93,0,0,1,20.66,0Z" />
    <path className='cls-2' d="M66.45,71.17H50.57a18.72,18.72,0,0,0,2.13-3,17.75,17.75,0,0,0,0-17.93L40.05,28.37a17.76,17.76,0,0,0-15.53-9,18,18,0,0,0-3.62.36L28.83,6A12,12,0,0,1,49.66,6L76.87,53.14A12,12,0,0,1,66.45,71.17Z" />
</svg>
)

export default Icon

payload.config.ts

import { buildConfig } from 'payload/config';
import { env } from './lib/env';

import Icon from './admin/Icon';

export default buildConfig({
  admin: {
    meta: {
      titleSuffix: "Example title",
    },
    components: {
      graphics: {
        Icon: Icon,
      },
    },
  },
  // all the other stuff
})

Custom logo for breadcrumbs disappears when clicking on collection