Ant design Breadcrumb not showing pointer when I remove href

Question

I have an ant design breadcrumb-like this.

When I remove href from breadCrumb and instead handle a click event to change state....... The mouse pointer is not appearing. Hence it is confusing to users UI-wise.

Any Idea how it can be fixed?

Ant design code as such

import { Breadcrumb } from 'antd';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';



ReactDOM.render(
  <Breadcrumb>
    <Breadcrumb.Item href="">
      <HomeOutlined />
    </Breadcrumb.Item>
    <Breadcrumb.Item href="">
      <UserOutlined />
      <span>Application List</span>
    </Breadcrumb.Item>
    <Breadcrumb.Item>Application</Breadcrumb.Item>
  </Breadcrumb>,
  mountNode,
);

How I'm modifying the code

const handleCrumb2 =()=>{
            setFormState("input");
          }

const handleCrumb1 =()=>{
            window.location="/"
          }
    


  <Breadcrumb>
    <Breadcrumb.Item onClick={handleCrumb1}>
      <HomeOutlined />
    </Breadcrumb.Item>
    <Breadcrumb.Item  onClick={handleCrumb2}>
      <UserOutlined />
      <span>Setting</span>
    </Breadcrumb.Item>
    <Breadcrumb.Item>Create Nudge</Breadcrumb.Item>
  </Breadcrumb>,