Javascript 故事书不渲染组件

以下是我的组件：

Alert.tsx

import { Alert } from "react-bootstrap";

export enum AlertVariants {
  success = "success",
  danger = "danger",
}

export interface IAlertComponent {
  handleClose(): void;
  header: string;
  children: string;
  variant: AlertVariants;
}
export const AlertComponent = ({
  handleClose,
  header,
  children,
  variant,
}: IAlertComponent) => {
  return (
    <Alert variant={variant} onClose={handleClose} dismissible>
      <Alert.Heading>{header}</Alert.Heading>
      <p>{children}</p>
    </Alert>
  );
};

import { Meta, Story } from "@storybook/react";
import {
  AlertComponent,
  IAlertComponent,
  AlertVariants,
} from "../components/Alert";

const Template: Story<IAlertComponent> = (args) => <AlertComponent {...args} />;

export default {
  title: "Alert",
  component: AlertComponent,
} as Meta;

export const Alert = () => Template.bind({});
Alert.args = {
  handleClose: () => console.log("close"),
  header: "header",
  children: "content",
  variant: AlertVariants.danger,
};

export const tmp = () => <div>test</div>; // this gets rendered

在我运行

故事书
之后，我看到：


我做错了什么

编辑：

如果我在
Alert.stories.tsx
中执行此操作，它将呈现。所以它一定是带有args的smth

export const tmp = () => (
  <AlertComponent
    handleClose={() => {}}
    header={"hedaer"}
    variant={AlertVariants.danger}
  >
    test
  </AlertComponent>
);

export const tmp=（）=>(
{}}
标头={“hedaer”}
variant={AlertVariants.danger}
>
测试
);
我一定累了。我在做什么

export const Alert = () => Template.bind({});

而不是

export const Alert = Template.bind({});