I am working on a form engine, basically translating a bunch of json into components. I have a different functions that are called every time a component is rendered to set initial and submission values.

I am trying to return a specific value from an array, based on the count on each render eg, on first render, return the first item, on second render, return the second item, mostly because there is no other way for me to match an array item and a field to be rendered.

I have tried tracking the state using useRef and useState but i keep getting the react minified error . This is my current attempt, where the count is always at zero.

This is how my code looks :

export const ProgramWorkflowHandler: SubmissionHandler = {
  handleFieldSubmission: (field: FormField, value: any, context: EncounterContext) => {
    return value;
  },
  getInitialValue: (
    encounter: OpenmrsEncounter,
    field: FormField,
    allFormFields: Array<FormField>,
    context: EncounterContext,
  ) => {
    let renderCount = 0;
    const programWorkflows = getPatientProgram(context.patientPrograms, context.programUuid);

    if(field.type == 'programWorkflow') {
      const workflowUuid = programWorkflows[renderCount]?.states.find((state) => state.state.programWorkflow?.uuid)?.state?.programWorkflow?.uuid;
      renderCount += 1;
      return workflowUuid;
    }
    if(field.type == 'programState') {
      const programStateUuid = programWorkflows[0]?.states?.find((state) => state.state.retired == false)?.state.uuid;
      return programStateUuid;
    }
  },
};

This a sample of the array returned :

[
    {
        "uuid": "fe30f046-3c66-4524-a4a1-e8c11e0fa99c",
        "display": "TB Program",
        "program": {
            "uuid": "9dc21a72-0971-11e7-8037-507b9dc4c741",
            "name": "TB Program",
            "allWorkflows": []
        },
        "dateEnrolled": "2024-05-07T17:34:42.000+0300",
        "dateCompleted": null,
        "location": {
            "uuid": "86863db4-6101-4ecf-9a86-5e716d6504e4",
            "display": "ART Clinic"
        },
        "states": [
            {
                "state": {
                    "uuid": "031d22b8-4fde-45ba-9e0a-6b87337b29f3",
                    "retired": false,
                    "concept": {
                        "uuid": "159793AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
                    },
                    "programWorkflow": {
                        "uuid": "b70f609e-c3e8-4e4f-bd9e-97df5e95796a"
                    }
                }
            },
            {
                "state": {
                    "uuid": "dc3fbc52-15a9-444c-99d1-65f01f9199dd",
                    "retired": false,
                    "concept": {
                        "uuid": "aa7135e4-92f6-453e-bfea-923e08ec7052"
                    },
                    "programWorkflow": {
                        "uuid": "d6e3ed60-ffc7-4108-ab07-706d7b542d99"
                    }
                }
            }
        ]
    }
]

This is how a field object looks like :

{
    "type": "programState",
    "label": "Program State",
    "id": "programState",
    "required": "true",
    "questionOptions": {
        "rendering": "ui-select-extended",
        "datasource": {
            "name": "program_workflow_state_datasource"
        },
        "concept": "0eaa21e0-5f69-41a9-9dea-942796590bbb"
    },
    "hide": {
        "hideWhenExpression": "programWorkflow === '' "
    }
}

Any help/advise will be appreciated.