Не получается вывести вершину при изменении поля ввода

import { useState } from "react";
import ReactFlow, { addEdge, Controls } from "react-flow-renderer";
 
function MyGraph() {
  const [elements, setElements] = useState([]);
 
  function createNode(values) {
    const node = {
      id: values.id,
      type: "default",
      data: { label: values.label },
      position: { x: values.x, y: values.y }
    };
    return node;
  }
 
  function handleInputChange(event) {
    const { name, value } = event.target;
    // update form values here
  }
 
  function handleAddNode(event) {
    const label = event.target.value;
    const values = {
      id: "node-" + elements.length,
      label: label,
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight
    };
    const node = createNode(values);
    setElements([...elements, node]);
  }
 
  return (
    <div className="graph">
      <ReactFlow
        elements={elements}
        onConnect={(params) => setElements((els) => addEdge(params, els))}
      >
        <Controls />
      </ReactFlow>
      <input type="text" onChange={handleAddNode} />
    </div>
  );
}
 
export default MyGraph;

function handleAddNode(event) {
  const label = event.target.value;
  console.log("Adding node with label:", label); // отладочный вывод
  const values = {
    id: "node-" + elements.length,
    label: label,
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight
  };
  const node = createNode(values);
  setElements([...elements, node]);
}