Как сохранить значение состояния, используя контекст

Question

Я создаю модальное с 3steo, я хочу использовать состояния 1-го шага на 2-х шагах, но когда я перехожу на 2-й шаг, все состояние инициализируется в исходное состояние. Я новичок в использовании реагировать контекста и обратного вызова. Ниже приведен код

const AuditModalContextProvider = ({children}) => {
  const [modalState, setModalState] = useState({
    isOpen: false,
    modalType: 'New',
    modalFor: 'Audit',
    id: '',
    name: '',
    method: '',
    activeCreateForm: 0,
})

const openModal = useCallback(
    () =>
      setModalState({
        ...modalState,
        isOpen: true,
      }),
    [modalState]
  )

 const handleChangeCreateForm = useCallback(step => {
    if (step === 0) {
      handleIncreaseDecreaseStep(0, [])
    } else if (step === 1) {
      handleIncreaseDecreaseStep(1, [])
    } else if (step === 2) {
      handleIncreaseDecreaseStep(2, [])
    } else if (step === 3) {
      handleIncreaseDecreaseStep(3, [])
    }
  }, [])

  const handleStatusforPreviousNextButton = useCallback(
    val => {
      setModalState({
        ...modalState,
        isOpen: true,
        formState: false,
      })

      handleChangeCreateForm(
        modalState.activeCreateForm >= 0 && modalState.activeCreateForm < 4
          ? modalState.activeCreateForm + val
          : 0
      )
    },
    [setModalState, handleChangeCreateForm, modalState]
  )

const value = {
    ...modalState,
    openModal,
    closeModal,
    handleStatusforPreviousNextButton,
    handleChangeCreateForm
}
return <AuditModalContext.Provider value={value}>{children}</AuditModalContext.Provider>
}

const AuditModalContextConsumer = AuditModalContext.Consumer

export {AuditModalContext, AuditModalContextProvider, AuditModalContextConsumer}

Как сохранить состояния, используя контекст