const ScrollToSectionButton = ({ linkedTo }) => {
  const ctx = useSectionController();
  const handleClick = () => {
    ctx.scrollToIndex(linkedTo, {
      behavior: "smooth",
      block: "center",
      inline: "center",
    });
  };
  return <button onClick={handleClick}>Go to Section #{linkedTo + 1}!</button>;
};

<SectionController>
  <Section>
    <ScrollToSectionButton linkedTo={1} />
  </Section>
  <Section>
    <ScrollToSectionButton linkedTo={2} />
  </Section>
  <Section>
    <ScrollToSectionButton linkedTo={0} />
  </Section>
</SectionController>;

const AlertIfVisible = () => {
  const { isVisible, index } = useSection();
  useEffect(() => {
    if (isVisible) alert(`Section #${index} is Visible`);
  }, [isVisible]);
  return <p>Some text...</p>;
};

<SectionController>
  <Section>
    <AlertIfVisible linkedTo={1} />
  </Section>
  <Section>
    <AlertIfVisible linkedTo={2} />
  </Section>
  <Section>
    <AlertIfVisible linkedTo={0} />
  </Section>
</SectionController>;