Use Ref's for first render checks

[FancMa01]

There are a number of instances in the application where we are checking if it is the first render in order to perform some actions. Ensure these are using Ref's instead of States.

There is potential to create a custom re-usable hook that could help centralize and make code more consistent.

Similar to the following.

function useFirstRender() {
  const ref = useRef(true);
  const firstRender = ref.current;
  ref.current = false;
  return firstRender;
}

More information on the benefits of custom hooks

https://react.dev/learn/reusing-logic-with-custom-hooks