How to avoid attaching id attributes to all of the elements, instead I want to keep ids within refs.

I have list of refs

  const questionsRef = useRef<Array<HTMLDivElement | null>>([]);

I am looping through questions and attach on every question ID, which later I will use to scroll to that question.

Is there a way to avoid attaching ID to the element? To attach it on ref or to save refs by element ID something like that?

 <div
    id={elementId}
    ref={el => {
    questionsRef.current[rflxIdx] = el;
    }}
 >

Cus later I am scrolling to that question if is not answered

export const focusNextQuestion = (
  questionsRef: React.MutableRefObject<(HTMLDivElement | null)[]>,
  nextQuestion: Readonly<Question | null>,
) => {
  if (questionsRef.current) {
    const elementId =
      nextQuestion?.data?.base?.group?.name || nextQuestion?.data?.base?.key;

    const focusElement = questionsRef.current.find(el => el?.id === elementId);

    if (focusElement) {
      focusElement.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'nearest',
      });

      focusElement?.classList.add('focus-unanswered-question');

      Promise.all(
        focusElement.getAnimations().map(animation => animation.finished),
      ).then(() => focusElement?.classList.remove('focus-unanswered-question'));
    }
  }
};