i have to retrieve a value from api and store it in a state. but the value returned from run api is always previous value of the run.

so consider i have 2 buttons run1 and run2. clicking either of them will call the same run api for that item.

when run1 is clicked isComplete is true from api and for run2 isComplete is false from api.

when none of the buttons run1 and run2 clicked the data returned is undefined for the item and hence isComplete is undefined too. the data is like below,

data = [ 
           {
               isCompleteRun: true,//this can be true or false
           }
       ]

now if user clicks run1 btn i get runinprogress true. and isComplete: true, if run2 btn clicked runinprogress is true and isComplete is false.

i have to show two div elements based on value of isCompleteRun.

{isRunInProgress && isCompleteRun && <div>first</div>}
{isRunInProgress && !isCompleteRun && <div>second</div>}

but the problem is isCompleteRun is the previous value unless either of run button clicked. how can i save the isCompleteRun to state and have updated value every time run clicked.

below is the code,

const isCompleteRun = React.useMemo(() => {
    return data?[0]?.isCompleteRun;
}, [data]);

the value of isCompleteRun is always the value of previous data for sometime unless run button is clicked or undefined when no run button clicked for the first time. could someone help me fix this. thanks.