The simple solution may be at UX design. The over updating comes from the global indication which section is active, with many sections visible simultaneously.
For your example, if you don't have to de-active the previous active Li, the update is localized. You may consider to use a wizard for the workflow.
If there is no way to re-design the workflow/CSS, useRef will be a choice. Thanks for sharing the problem and solution.
Please let me know if you find a better way.
Have a nice day!