Реализуйте React-хук useIsFirstRender, который возвращает true при первом рендере компонента и false при всех последующих.

Безопасно различать начальный рендер и состояние после монтирования через state, переключая флаг в эффекте; это создаст один дополнительный рендер.

Пример не меняет ref во время render:

function useIsFirstRender() {
  const [first, setFirst] = useState(true);
  useEffect(() => { setFirst(false); }, []);
  return first;
}

useState/useEffect импортируют из React. Контракт — true до первого эффекта, затем false до размонтирования; повторные предварительные render-вызовы в Strict/Concurrent Mode нельзя надёжно считать отдельными пользовательскими рендерами. При новом монтировании флаг снова true.