antd steps custom props array in react - reactjs

Question

I have question and need some help,
currently I'm creating website using reactjs and antd, I'm trying to create reusable antd steps components, and I want to pass props as array, and using the props as the content of antd steps, here is my code
const [current, setCurrent] = useState(0);
const [steps, setSteps] = useState([
{
title: "Info Dasar",
content: "halo",
},
{
title: "Alamat & Koordinasi",
content: <div>yuhu</div>,
},
{
title: "Whatsapp Settings",
content: <div>yuhu</div>,
},
]);
const classes = useStyles();
const next = () => {
setCurrent(current + 1);
};
const prev = () => {
setCurrent(current - 1);
};
// console.log(itemContent);
const items = steps.map((item) => ({
key: item.title,
title: item.title,
}));
return (
<>
<Steps
current={current}
labelPlacement="vertical"
className={classes.root}
items={items}
type="primary"
// direction='vertical'
/>
<div>{steps[current].content}</div>
<div className={classes.buttonContainer}>
{current < steps.length - 1 && (
<Buttons
text="Selanjutnya"
containerClass="mt-[20px] w-[186px] h-[48px]"
customClass="btn-primary btn-large"
onClick={() => next()}
/>
)}
{current > 0 && (
<Buttons
text="Sebelumnya"
containerClass="mt-[20px] w-[186px] h-[48px]"
customClass="btn-primary btn-large"
onClick={() => prev()}
/>
)}
{current === steps.length - 1 && (
<Buttons
text="Submit"
containerClass="mt-[20px] w-[186px] h-[48px]"
customClass="btn-primary btn-large"
onClick={() => message.success("Processing complete!")}
/>
)}
</div>
</>
);
and here what I try to pass as props
const StepsDoc = () => {
return (
<StepsComponent
currentSteps={0}
itemContent={[
{
title: "Info Dasar",
content: "halo",
},
{
title: "Alamat & Koordinasi",
content: <div>yuhu</div>,
},
{
title: "Whatsapp Settings",
content: <div>yuhu</div>,
},
]}
/>
);
};