The documentation refers specifically to their own CSS file which must be imported in a React app like they are showing in the example:

import "@react-sigma/core/lib/react-sigma.min.css";

Disclaimer: depending on your React app setup, the way to import a CSS file might differ.

The example in the documentation was broken when I wrote this answer. I opened an issue on the react-sigma repo and it was fixed since then.

When I tried it, some dependencies were missing and some changes were needed.

npm install @react-sigma/core sigma graphology graphology-types lodash 

import { useEffect } from "react";
import Graph from "graphology";
import { SigmaContainer, useLoadGraph } from "@react-sigma/core";

// Import the style file here
import "@react-sigma/core/lib/react-sigma.min.css";

export const LoadGraph = () => {
  // first change to their example
  const loadGraph = useLoadGraph();

  // also wrapped their graph instantiation side-effect with useEffect
  useEffect(() => {
    const graph = new Graph();

    graph.addNode("first", {
      // Required position
      x: 1,
      y: 1,

      size: 15,
      label: "My first node",
      color: "#FA4F40"
    });

    // Calling the function that was missing from the example
    loadGraph(graph);
  }, [loadGraph]);

  // Returning null to get a valid component
  return null;
};

export const DisplayGraph = () => {
  return (
    <SigmaContainer style={{ height: "500px", width: "500px" }}>
      <LoadGraph />
    </SigmaContainer>
  );
};

Note that I used TypeScript for the example, which gives insightful error messages since react-sigma provides its own types.

Then it was clear that the useLoadGraph hook wasn't used properly since it doesn't accept any parameter and it returns a function accepting a graph parameter. This can be confirmed with the API documentation.

I also figured that lodash was missing from errors in the developer console.

Please refer to the documentation as it's now up-to-date.