Form wizard

import React, { useState } from 'react'
import * as Icons from 'react-feather';
import Loki from 'react-loki';
import AccountSection from '../../Components/DataEntry/FormWizard/AccountSection';
import HintSection from '../../Components/DataEntry/FormWizard/HintSection';
import ProfileSection from '../../Components/DataEntry/FormWizard/ProfileSection';
import TermAndCondition from '../../Components/DataEntry/FormWizard/TermAndCondition';

const BasicExample = () => {
    const [finishedForm, setFinishedForm] = useState(false);

    //Wizard steps
    const complexSteps = [
        {
            label: 'Account',
            icon: <Icons.Lock />,
            component: <AccountSection />

        },
        {
            label: 'Step2',
            icon: <Icons.User />,
            component: <ProfileSection />
        },
        {
            label: 'Step3',
            icon: <Icons.AlertCircle />,
            component: <HintSection />
        },
        {
            label: 'Step4',
            icon: <Icons.CheckCircle />,
            component: <TermAndCondition />
        },
    ];

    //Custom Action Buttons for form Wizard
    const _customActions = ({ cantBack, isInFinalStep, backHandler, nextHandler }) => {
        return (
            <div className="button-group">
                <Button variant='primary' size='sm' className='mx-2' onClick={backHandler} disabled={cantBack || finishedForm}>
                    {"Previous"}
                </Button>
                <Button variant='primary' size='sm' onClick={nextHandler} disabled={finishedForm}>
                    {isInFinalStep ? "Place Order" : "Next"}
                </Button>
            </div>
        );
    };

    const handleFinish = () => {
        alert("Thank You");
        setFinishedForm(true)
    }

  return (
    <Loki
        steps={complexSteps}
        onFinish={handleFinish}
        renderActions={_customActions}
    />
  )
}

export default BasicExample;