React - scrollIntoView() - Przewijanie do danego elementu na podstawie identyfikatora

Używając "react-scroll-into-view", implementuję "scrollowanie" do danego elementu na podstawie id, jak tutaj: https://codesandbox.io/s/react-scroll-into-view-icbws
Po przeniesieniu kodu do swojej aplikacji zauważyłem, że gdy odwołuję się do "statycznego" elementu np. <div id="a">a</div> wszystko działa poprawnie (po naciśnięciu przycisku ekran przesuwa się do diva), natomiast w przypadku elementów wygenerowanych dynamicznie (np. przy wykorzystaniu stanu?) otrzymuję po naciśnięciu przycisku: Uncaught TypeError: Cannot read property 'scrollIntoView' of null w konsoli.
Domyślam się, że chodzi, o kolejność renderowania danych, jednak jak wymusić ich kolejność? Poprzez componentDidMount()?

Poniżej zamieszczam większy fragment kodu, który może być istotny, szczególnie 47 i 57 linia:

class App extends Component {
  state = {
    activeCategories: [...categories],
    isCheckedCategories: Object.fromEntries(categories.map(category => [category, true])),
  };

  changeEvent = event => {
    let activeCategories = this.state.activeCategories;
    let selectedCategory = event.target.value;
    if (event.target.checked === true) {
      activeCategories.push(selectedCategory);
    } else {
      let categoryIndex = activeCategories.indexOf(selectedCategory);
      activeCategories.splice(categoryIndex, 1);
    }
    this.setState({
      isCheckedCategories: {
        ...this.state.isCheckedCategories,
        [selectedCategory]: !this.state.isCheckedCategories[selectedCategory]
      }
    });
  };

  render() {
    const {activeCategories, isCheckedCategories} = this.state;

    return (
      <>
          <GlobalStyle/>
          {categories.map(category => <label>
              <Input
                key={category}
                type="checkbox"
                name={category}
                value={category}
                onChange={this.changeEvent}
                checked={isCheckedCategories[category]}
              />
              {category}
            </label>
          )}
          <MapContainer activeCategories={activeCategories}/>
          <Animation>
            {galleries.map(gallery => (activeCategories.includes(gallery.border)) &&
              <Carousel>
                {gallery.photos.map(photo => <>
                  <LazyImage id={`${gallery.index}`} <!-- Wspomniany błąd -->
                    key={photo.url}
                    src={photo.url}
                    alt={photo.title}
                    aspectRatio={[16, 9]}
                  />
                  <figcaption>{photo.title}</figcaption>
                </>)}
              </Carousel>)}
          </Animation>
          <div id="a">a</div> <!-- Poprawne przesunięcie -->
      </>
    );
  }
}

export default App;

a gallery.index z linii 47 dobrze Ci ustawia id tych zdjęć?
Ja zawsze używam czegoś takiego jak chce mieć dostęp do indeksu :

gallery.photos.map((photo,i))

Może tu tkwi problem

Gustawiec napisał(a):

a gallery.index z linii 47 dobrze Ci ustawia id tych zdjęć?

Dziękuję... To może być poszlaka, ponieważ gdy wchodzę w "Elements" w Google Chrome to divy, do których powinno mnie przenosić nie mają id.
id jest widoczne jedynie w "Components" (badając źródło strony).

Na pewno przypisywanie id powinno być w Carousel, a nie w LazyImage:

<Carousel
    id={`${gallery.index}`}>
    {gallery.photos.map(photo => <>
        <LazyImage
        key={photo.url}
        src={photo.url}
        alt={photo.title}
        aspectRatio={[16, 9]}
        />
        <figcaption>{photo.title}</figcaption>
    </>)}
</Carousel>)}

Jednak nie zmienia to błędu...
Ale istotnie, coś jest nie tak z identyfikatorem.

Przesyłam link do aplikacji, aby łatwiej było pokazać na żywym przykładzie: https://plkpiotr.github.io/photo-gallery/

Spróbowałeś tak ?

              <Carousel>
                {gallery.photos.map((photo, i) => <>
                  <LazyImage id={i} 
                    key={photo.url}
                    src={photo.url}
                    alt={photo.title}
                    aspectRatio={[16, 9]}
                  />
                  <figcaption>{photo.title}</figcaption>
                </>)}
              </Carousel>)}

Gustawiec napisał(a):

Spróbowałeś tak ?

              <Carousel>
                {gallery.photos.map((photo, i) => <>
                  <LazyImage id={i} 
                    key={photo.url}
                    src={photo.url}
                    alt={photo.title}
                    aspectRatio={[16, 9]}
                  />
                  <figcaption>{photo.title}</figcaption>
                </>)}
              </Carousel>)}

Jeszcze nie, zaraz sprawdzę...

Jednak o dziwo przypisanie id w <figcaption> działa (poprawne scrollowanie):

              <Carousel>
                {gallery.photos.map(photo => <>
                  <LazyImage
                    key={photo.url}
                    src={photo.url}
                    alt={photo.title}
                    aspectRatio={[16, 9]}
                  />
                  <figcaption id={`${gallery.index}`}>{photo.title}</figcaption>
                </>)}

Nie radzę sobie / nie działa (niepotrzebne skreślić) przypisywanie id do znaczników, które nie są domyślne - mówiąc bardzo ogólnie... Może chodzi o VDOM...
Prowizorycznie działa ;) Może dowiem się wkrótce dlaczego...
Dziękuję za pomoc!