storybook.js icon not loading with Ant Design

Question

I am working on a storybook.js on a Next.js project. I have integrated Ant Design as a front-end library. I have created an IconButton component and I want to assign icons to that IconButton component from the controls of the storybook. But the icon is not displaying in the icon button when I assign them from the controls of storybook.

Here is my icon button story code.

import IconButton from "../IconButton/IconButton";
import type { Meta, StoryObj } from "@storybook/react";
import Home from "../../../../public/assets/icons/Home";


const icons = { Home: Home };

const meta: Meta<typeof IconButton> = {
  title: "Example/IconButton",
  component: IconButton,
  tags: ["autodocs"],
  argTypes: {
    icon: {
      options: Object.keys(icons),
      mapping: icons,
      control: {
        type: 'select',
        labels: {
          Home: 'Home',
        }
      }
    },
  },
};

export default meta;
type Story = StoryObj<typeof IconButton>;

export const Default: Story = {
  args: {
    icon: 'Home',
    text: "Button",
    type: "default",
    shape: "round",
    size: "large",
  },
};

I have tried the same code that is in storybook documentation. https://storybook.js.org/docs/react/essentials/controls

I have ensured that the icon path is correct. Also when I check the icon button component outside storybook is is showing the icon correctly.

On the browser html the icon is suppose to be added as an svg inside the span of the Ant Design button.

Here is the html outside of storybook.

<button type="button" class="ant-btn css-dev-only-do-not-override-w2m5o7 ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only IconButton_primary__HK382">
<span class="ant-btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="19" viewBox="0 0 21 19" fill="none"><path d="M7.89045 17.6349V12.2182H12.2238V17.6349C12.2238 18.2307 12.7113 18.7182 13.3071 18.7182H16.5571C17.1529 18.7182 17.6404 18.2307 17.6404 17.6349V10.0515H19.4821C19.9804 10.0515 20.2188 9.43404 19.8396 9.10904L10.7829 0.951543C10.3713 0.58321 9.74295 0.58321 9.33128 0.951543L0.274613 9.10904C-0.0937202 9.43404 0.13378 10.0515 0.632113 10.0515H2.47378V17.6349C2.47378 18.2307 2.96128 18.7182 3.55711 18.7182H6.80711C7.40295 18.7182 7.89045 18.2307 7.89045 17.6349Z" fill="#fff"></path></svg>
</span>
</button>

Here is html from the storybook after the icon is being selected from the controls of the storybook.

<button type="button" class="ant-btn css-dev-only-do-not-override-190m0jy ant-btn-round ant-btn-default ant-btn-lg ant-btn-icon-only undefined">
<span class="ant-btn-icon"></span>
</button>

The svg is not loading inside the span of the button.