Как использовать пользовательский компонент React для узлов в VisJS?

Question

Я использую библиотеку Reaction-Graph-Vis для создания приложения, чтобы продемонстрировать структуру данных узлов и как они связаны друг с другом.

У меня все отлично работает, но теперь я хочу внести некоторые изменения в него.

Вот что у меня сейчас есть:

import React from 'react';
import Graph from 'react-graph-vis';

const graph = {
  nodes: [
    { id: 1, label: 'One', color: 'blue' },
    { id: 2, label: 'Two', color: 'red' },
  ],
  edges: [
    { from: 1, to: 2 },
  ],
};

const options = {
  edges: {
    color: 'black',
  },
  layout: {
    hierarchical: false,
  },
};

const events {
  select({ nodes, edges }) {
    console.log('Selected Nodes:', nodes);
    console.log('Selected Edges:', edges);
  },
};

const MyGraph = () => (
  <Graph graph={graph} options={options} events={events} />
);

Теперь, как я уже говорил, это прекрасно работает!

Однако я хочу настроить этот стиль узлов. И я хотел бы сделать несколько довольно продвинутых вещей. Есть ли способ настроить пользовательский компонент React для узлов?

Если да, то как? Могу ли я установить его через options или же graphnodes?

Что-то вроде этого?

const graph = {
  nodes: [
    { id: 1, label: 'One', component: <MyCustomComponent label="One" /> },
    { id: 2, label: 'Two', component: <MyCustomComponent label="Two" /> },
  ],
  edges: [
    { from: 1, to: 2 },
  ],
};

И помощь будет высоко ценится!:)