feat: fix form render

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bestdoctor/ke-beta",
-  "version": "13.2.4",
+  "version": "13.2.5",
   "description": "BestDoctor back-office UI constructor",
   "author": "pro100filipp",
   "main": "dist/index.js",

src/Wizard/Wizard.tsx

@@ -1,16 +1,15 @@
 import { Box } from '@chakra-ui/react'
-import React, { ReactNode, useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 
 import { usePropState } from '@cdk/Hooks'
-import { WizardProps } from './types'
+import { StepArgs, WizardProps } from './types'
 
 export const Wizard = <Key extends string, Action extends string, StepData extends object>(
   props: WizardProps<Key, Action, StepData>
 ): JSX.Element => {
   const { start, steps, onFinish, onRestart, name, map } = props
   const [currentStep, setCurrentStep] = useState(start.step)
   const [currentData, setCurrentData] = usePropState(start.data)
-  const [currentForm, setCurrentForm] = useState<ReactNode>(null)
 
   const next = useCallback(
     (action: Action, newData: StepData, submit): void => {
@@ -45,14 +44,12 @@ export const Wizard = <Key extends string, Action extends string, StepData exten
     [currentData, setCurrentData]
   )
 
-  useEffect(() => {
-    setCurrentForm(steps[currentStep]({ data: currentData, next, restart, finish, onChange }))
-  }, [currentData, currentStep, next, finish, restart, steps, onChange])
+  const FormElement: React.FC<StepArgs<Action, StepData>> = steps[currentStep]
 
   return (
     <Box>
       {name}
-      {currentForm}
+      <FormElement data={currentData} next={next} restart={restart} finish={finish} onChange={onChange} />
     </Box>
   )
 }

src/Wizard/types.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react'
+import { FC } from 'react'
 
-interface WizardProps<Key extends string, Action extends string, StepData extends object> {
+export interface WizardProps<Key extends string, Action extends string, StepData extends object> {
   map: Record<Key, Partial<Record<Action, Key>>>
-  steps: Record<Key, (args: StepArgs<Action, StepData>) => ReactNode>
+  steps: Record<Key, FC<StepArgs<Action, StepData>>>
   start: Start<Key, StepData>
   name: string
   onStepChange: (stepKey: Key, data: StepData) => void
@@ -15,14 +15,12 @@ interface Start<Key, StepData> {
   data: StepData
 }
 
-interface StepArgs<Action, StepData> {
+export interface StepArgs<Action, StepData> {
   data: StepData
   next: NextStep<Action, StepData>
   restart: () => void
   finish: () => void
   onChange: (data: StepData) => void
 }
 
-type NextStep<Action, StepData> = (nextKey: Action, data: StepData, submit?: (data: unknown) => void) => void
-
-export { WizardProps, NextStep, StepArgs }
+export type NextStep<Action, StepData> = (nextKey: Action, data: StepData, submit?: (data: unknown) => void) => void