I’m using the Fluent ui Details List

I’m creating a tally that lets a user click a plus or minus button to increase a counter. Once the plus/minus is clicked the number is updated in the data source (SharePoint list).

The problem I’m having is that when a user clicks plus/minus it won’t update the tally. This is because I can’t use state to hold the tally count. Here is the code (I’ve put comments where I think key points are):

    const _detailsListColumns = [
        {
            key: 'Tally',
            name: 'Tally',
            minWidth: 90,
            onRender: item => (
                _onRenderCellTally(item)
            )
        } as IColumn
];

 const _tallyCountIncrease = (itemId: number, itemTally: number): void => {
        setTallyCount((prevCount) => prevCount + 1);
        tallyCountNotState = itemTally + 1;
        const newTallyCount: any = { 
            Tally: tallyCountNotState
        }
        AddTallyToListItem(props.context, newTallyCount, itemId).catch(console.log);
    };

    const _tallyCountDecrease = (itemId: number, itemTally: number): void => {
        setTallyCount((prevCount) => prevCount - 1);
        tallyCountNotState = itemTally - 1;
        const newTallyCount: any = { 
            Tally: tallyCountNotState
        }
        AddTallyToListItem(props.context, newTallyCount, itemId).catch(console.log);
    };

const _onRenderCellTally = (item: ISPOList): React.ReactNode => {
        return (
            <>
                <Stack horizontal >
                    <IconButton
                        iconProps={_removeTallyIconProps}
                        onClick={() => _tallyCountDecrease(item.Id, item.Tally)}
                    />
                    <div className={styles.tallyCount}>{item.Tally}</div>//This displays the correct current tally. But if I replace this with a tally held in state, when the user interacts, it updates ALL the rows. Not what I need.
           <IconButton
              iconProps={_addTallyIconProps}
              onClick={() => _tallyCountIncrease(item.Id, item.Tally)}
           />
          </Stack>
         </>
     );
    };
    <DetailsList className={styles.detailsList}
        items={ideas}
        columns={_detailsListColumns}
        selectionMode={SelectionMode.none}
        setKey="set"
        checkButtonAriaLabel="select row"
     // onRenderItemColumn={_renderItemColumn} //Is this something that could be used?
     />

I understand that there maybe a property in the DetailsList that allows for unique row updates but after reading the docs thoroughly I’m yet to find/understand it.

Can anyone give me a clue?