useNetwork crashes

[skimchiebay]

I've made the most basic useNetwork implementation and I get an error.
There is no documentation or example for using useNetwork

This is my code:

import React from 'react';
import { ResponsiveNetwork } from '@nivo/network';
import { useNetwork } from '@nivo/network';

const data = {
  nodes: [{ id: 'A' }, { id: 'B' }, { id: 'C' }],
  links: [
    { source: 'A', target: 'B', distance: 100 },
    { source: 'B', target: 'C', distance: 100 },
    { source: 'C', target: 'A', distance: 100 },
  ],
};

const MyNetworkChart = () => {
  const { network, nodes, links } = useNetwork({
    nodes: data.nodes,
    links: data.links,
    width: 400,
    height: 400,
  });

  console.log({ network, nodes, links });
  return (
    <div style={{ width: '100%', height: 400 }}>
      <ResponsiveNetwork
        nodes={nodes}
        links={links}        
        nodeColor={(node) => 'blue'}
        linkColor={(link) => 'grey'}
      />
    </div>
  );
};

export default MyNetworkChart;

This is the error:
react-dom.development.js:11102 Uncaught TypeError: Cannot read properties of undefined (reading '0') at F.oe.linkDistance (hooks.ts:43:1) at F (hooks.ts:66:1)

[plouc]

You don't need to use the useNetwork hook in order to use ResponsiveNetwork, it's already used internally, so you should just pass the nodes and links as is to the data property, the way it's done for https://nivo.rocks/network/.

useNetwork can be used if you want to completely render things by yourself, but yes, there's no documentation about it, so you'll need to inspect what the hook returns, and you'd probably want to have a look at the default implementation.