useEffect for an event listener to scroll the page - works as PWA but not on iOS

I fixed this by adding a unique ID to each of my details elements instead of reusing the same ID. This fixed the problem in iOS and also works on the web.

  const saId = `sa-${did}`;

  useEffect(() => {
    const detailsAnswer = document.querySelector(`details#${saId}`);
    const scrollAnswerIntoView = () => {
      const showAnswer = document.getElementById(saId);
      // console.log('show answer check', showAnswer);
      if (showAnswer) {
        showAnswer.scrollIntoView();
      }
    };
    detailsAnswer?.addEventListener('toggle', scrollAnswerIntoView);
    // console.log('useEffect listener for sa', detailsAnswer);
    return () => {
      detailsAnswer?.removeEventListener('toggle', scrollAnswerIntoView);
    };
  }, [saId]);

  return (
    <details id={csaId} className="show-answer">
      <summary>
        Hey
      </summary>
      <br />
      { children }
    </details>
  );