I’m trying to use the layout hooks with ReactSigma, and following the guide here https://sim51.github.io/react-sigma/docs/example/layouts, trying both circular and forceatlas2, I’m getting an error of Error: No context provided: useSigmaContext() can only be used in a descendant of <SigmaContainer>.

This is weird because adding a useSigmaContext() to the line before use const { assign } = useLayoutForceAtlas2(); does not trigger an error.

I’m unsure how to proceed as no one seems to have this issue.

Versions, latest as of May 2024.

Sigma: 3.0.0-beta.18
@react-sigma/core /layout-core /layout-forceatlas2: 4.0.2
graphology: 0.25.4
graphology-layout-forceatlas2: 0.10.1

My code, but using exactly as the documentation above also does not work.

const GraphWrapper: FC<Props> = ({ concepts }: { concepts: ConceptNode[] }) => {
  useSigmaContext();
  // Error here
  const { assign } = useLayoutForceAtlas2();
  const loadGraph = useLoadGraph();

  useEffect(() => {
    const graph = buildGraph(concepts);
    loadGraph(graph);
    // assign();
  }, [loadGraph, concepts]);

  return null;
};

const NetworkGraph = ({ concepts }: Props) => {
  return (
    <SigmaContainer settings={{ allowInvalidContainer: true }}>
      <GraphWrapper concepts={concepts} />
    </SigmaContainer>
  );
};

Tried using the exact documentation code – Same error
Adding useSigmaContext before useLayout to confirm it is within the ReactContext, but for some reason the layout hook still thinks it’s not inside the context