React issues with createRef for nested navigation + IntersectionObserver

Working Example

I've found a solution while trying to keep most of your logic intact. Firstly what you need to do is to store the subrefs (the sections ref) in the same object as your Case ref. So you will need an extra reduce function to create those inside the refs object:

App.js

const refs = data.reduce((refsObj, Case) => { // Put this outside the render
    const subRefs = Case.sections.reduce((subrefsObj, Section) => {
      subrefsObj[Section] = React.createRef();
      return subrefsObj;
    }, {});

    refsObj[Case.id] = {
      self: React.createRef(), // self is the Case ref, like Apple, Microsoft...
      subRefs // This is going to be the subrefs
    };
    return refsObj;
  }, {});

Then you add an extra state to handle which sub section is active, like const [activeSection, setActiveSection] = React.useState(); And you put it anywhere you also use the activeCase. You need that because you said that the Case and Sections need to work independently. (Both active at the same time).

Case.js

You will need to pass along the subrefs to the child components, so you do:

    <Tag data={data} subRefs={refs[data.id].subRefs} />

And you will also need the intersection observer for each of the subrefs. So your useEffect will look like:

 useEffect(() => {
    const observerConfig = {
      rootMargin: "-50% 0px -50% 0px",
      threshold: 0
    };

    const observerCallback = (entries, isCase) => {
      const activeEntry = entries.find(entry => entry.isIntersecting);

      if (activeEntry) {
        if (isCase) setActiveCase(activeEntry.target.id);
        else setActiveSection(activeEntry.target.id);
      } else if (isCase) {
        setActiveCase(null);
        setActiveSection(null);
      }
    };

    const caseObserver = new IntersectionObserver(
      entries => observerCallback(entries, true),
      observerConfig
    );
    caseObserver.observe(refs[data.id].self.current);

    const sectionObserver = new IntersectionObserver(
      entries => observerCallback(entries, false),
      observerConfig
    );

    Object.values(refs[data.id].subRefs).forEach(subRef => {
      sectionObserver.observe(subRef.current);
    });

    return () => {
      caseObserver.disconnect();
      sectionObserver.disconnect();
    }; // Clenaup the observer if unmount
  }, [refs, data]);

Then in your amazon/index.js ,microsoft/index.js and apple/index.js files. You pass along the ref again:

<Template
        data={this.props.data}
        caseSections={caseSections}
        subRefs={this.props.subRefs}
      />

Finally, in your template.js file you will have the following so you can assign the right ref:

const Template = props => {
  return (
    <React.Fragment>
      <div
        sx={{
          background: "#eee",
          transition: "background ease 0.5s"
        }}
      >
        {props.data.sections &&
          props.data.sections.map(subItem => (
            <Container
              ref={props.subRefs && props.subRefs[subItem]}
              id={`${props.data.id}--${subItem}`}
              key={subItem}
              className="article"
            >
              <Section sectionId={subItem} caseSections={props.caseSections} />
            </Container>
          ))}
      </div>
    </React.Fragment>
  );
};

I believe most of it is covered in the post. You can check your forked working repo here

You can simplify your code. You don't really need refs or intersectionObservers for your use case. You can simply scrollIntoView using document.getElementById (you already have ids to your navs.

You can do setActiveCase very well in handleClick.

Working demo

Modify handleClick like this

const handleClick = (subTabId, mainTabName) => {
    //console.log("subTabName, mainTabName", subTabId, mainTabName);
    setActiveCase({ mainTab: mainTabName, subTab: subTabId.split("--")[1] }); //use this for active tab styling etc
    document.getElementById(subTabId).scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
  };

Navigation.js Call handleClick like this.

{item.sections &&
            item.sections.map(subItem => (
              <div
                className={`${styles.anchor}`}
                key={`#${item.title}--${subItem}`}
                sx={{ marginRight: 3, fontSize: 0, color: "text" }}
                href={`#${item.title}--${subItem}`}
                onClick={e => {
                  handleClick(`${item.id}--${subItem}`, item.id);
                  e.stopPropagation();
                }}
              >
                {toTitleCase(subItem)}
              </div>
            ))}