I can't add nodetypes dynamic

[l00n00l]

flume code

  var menuOptions = React.useMemo(function () {
    var options = orderBy_1(Object.values(nodeTypes).filter(function (node) {
      return node.addable !== false;
    }).map(function (node) {
      return {
        value: node.type,
        label: node.label,
        description: node.description,
        sortIndex: node.sortIndex,
        node: node
      };
    }), ["sortIndex", "label"]);
    if (!disableComments) {
      options.push({ value: "comment", label: "Comment", description: "A comment for documenting nodes", internalType: "comment" });
    }
    return options;
  }, [nodeTypes, disableComments]);

my code

    let [nt, setNT] = useState(config.nodeTypes)
    let [c, setc] = useState(0)
    function onClick() {
        config.addNodeType({
            type: "numbertest" + c,
            label: "number",
            description: "inputa number test",
            initialWidth: 160,
            inputs: ports => [
                ports.number({ label: "number test" })
            ],
            outputs: ports => [
                ports.number()
            ]
        })
        setc(c + 1)
        setNT(config.nodeTypes)
        console.log(config.nodeTypes)
    }
    return (
        <div style={{ width: "100vw", height: "100vh" }}>
            <NodeEditor
                nodeTypes={nt}
                portTypes={config.portTypes}
                circularBehavior="allow"
                defaultNodes={[
                    {
                        type: "homepage",
                        x: 190,
                        y: -150
                    }
                ]}
                renderNodeHeader={headerRender}
                onChange={onChange}
            />
            <button style={{ position: "absolute", left: "0px", top: "0px" }}
                onClick={onClick}
            >test</button>
        </div>
    )

when I click the test button, then debug the program, the menuOptions will never change. How can I fix my program?