Type error running the usage example

[ferdinandlist]

Hi! I was trying to make myself familiar with react-dataflow-editor and set up the usage example from the Readme. Setting up the example I ran into the following type error related to the Editor state prop:

webpack compiled with 1 warning
ERROR in src/GraphEditor.tsx:47:34
TS2322: Type 'EditorState<Schema>' is not assignable to type 'EditorState<GetSchema<{ add: { name: string; inputs: { a: null; b: null; }; outputs: { sum: null; }; backgroundColor: string; }; div: { name: string; inputs: { dividend: null; divisor: null; }; outputs: { quotient: null; remainder: null; }; backgroundColor: string; }; }>>'.
  Types of property 'nodes' are incompatible.
    Type 'Record<string, { id: string; kind: string; inputs: Record<string, string | null>; outputs: Record<string, string[]>; position: Position; }>' is not assignable to type 'Record<string, Node<GetSchema<{ add: { name: string; inputs: { a: null; b: null; }; outputs: { sum: null; }; backgroundColor: string; }; div: { name: string; inputs: { dividend: null; divisor: null; }; outputs: { quotient: null; remainder: null; }; backgroundColor: string; }; }>, "add" | "div">>'.
      'string' index signatures are incompatible.
        Type '{ id: string; kind: string; inputs: Record<string, string | null>; outputs: Record<string, string[]>; position: Position; }' is not assignable to type 'Node<GetSchema<{ add: { name: string; inputs: { a: null; b: null; }; outputs: { sum: null; }; backgroundColor: string; }; div: { name: string; inputs: { dividend: null; divisor: null; }; outputs: { quotient: null; remainder: null; }; backgroundColor: string; }; }>, "add" | "div">'.
    45 |
    46 |        
  > 47 |        return <Editor<S> kinds={kinds} state={state} dispatch={dispatch} />

Here is the .tsx source:

import React, { useReducer } from "react"
import {
	Editor,
	EditorState,
	GetSchema,
	EditorAction,
	makeReducer,
} from "react-dataflow-editor"

const kinds = {
	add: {
		name: "Addition",
		inputs: { a: null, b: null },
		outputs: { sum: null },
		backgroundColor: "lavender",
	},
	div: {
		name: "Division",
		inputs: { dividend: null, divisor: null },
		outputs: { quotient: null, remainder: null },
		backgroundColor: "darksalmon",
	},
}


// Derive a concrete type-level schema from the kinds catalog
type S = GetSchema<typeof kinds>

interface MyEditorProps {
	initialValue?: EditorState<S>
}

const defaultInitialValue: EditorState<S> = {
	nodes: {},
	edges: {},
	focus: null,
}

export function MyEditor(props: MyEditorProps) {
	const reducer = makeReducer(kinds)
	const [state, dispatch] = useReducer(
		reducer,
		props.initialValue || defaultInitialValue
	)


	return <Editor<S> kinds={kinds} state={state} dispatch={dispatch} />
}

Apparently it's having a hard time digesting type S = GetSchema<typeof kinds>. Throwing in a @ts-ignore it all runs fine. I set this up using create-react-app with the typescript template if it makes any difference.

I would appreciate any headsup on where I'm taking the wrong turn here.

Best
Ferdinand