create a reusable Antd Steps component and pass props as an array of steps to the component. Here's how you can modify your code to achieve this:

import { Steps } from 'antd';

import { useState } from 'react';

import 'antd/dist/antd.css';

const { Step } = Steps;

const StepsComponent = ({ currentSteps, itemContent }) => {

  const [current, setCurrent] = useState(currentSteps);

  const next = () => {

    setCurrent(current + 1);

  };

  const prev = () => {

    setCurrent(current - 1);

  };

  return (

    <>

      <Steps current={current}>

        {itemContent.map((item) => (

          <Step title={item.title} key={item.title} />

        ))}

      </Steps>

      <div>{itemContent[current].content}</div>

      <div>

        {current < itemContent.length - 1 && (

          <button onClick={() => next()}>Next</button>

        )}

        {current > 0 && (

          <button onClick={() => prev()}>Previous</button>

        )}

      </div>

    </>

  );

};

const StepsDoc = () => {

  const itemContent = [

    {

      title: 'Info Dasar',

      content: 'halo',

    },

    {

      title: 'Alamat & Koordinasi',

      content: <div>yuhu</div>,

    },

    {

      title: 'Whatsapp Settings',

      content: <div>yuhu</div>,

    },

  ];

  return <StepsComponent currentSteps={0} itemContent={itemContent} />;

};

========================================================================

In the above code, we're passing the "currentSteps" and "itemContent" as props to the "StepsComponent". Then, we're using the "map" method to iterate over the "itemContent" array and create "Step" components for each step. The "title" and "key" of each "Step" component is set to the "title" of the step in the "itemContent" array. The "current" state is used to keep track of the current step. We're rendering the content of the current step using "itemContent[current].content". Finally, we're adding Next and Previous buttons to navigate between the steps using the "next" and "prev" functions.