I'm trying to render a graph to its original state from a saved JSON object that stores the nodes and edges arrays and all of their respective data including the x,y positions. I have an onLoad function that gets triggered when the page loads:

const onLoad = (_core) => {
  core.current = _core;
  if (savedView.nodes && savedView.node != undefined) {
       let curElements = JSON.stringify({
            nodes: savedView.nodes;
            edges: savedView.edges;
       });
       let layout = core.current._cy.layout({ name: 'preset' });
       layout.run();
       core.current._cy.add(JSON.parse(curElements));

In the above code snippet, _core is the core cytoscape graph object that's being passed into the function and the 'savedView' var is an object that contains the nodes and edges arrays that I want to pull out to use when re-rendering the graph. A sample of a couple of the elements contained in the nodes array:

{
    classes: 'draft-entity'
    data: {
        id: 'rkb1'
        type: 'person'
        displayName: 'Bob'
        elementType: 'node'
    {
    grabbable: true
    group: "nodes"
    locked: false
    pannable: false
    position: {x: 334.85120850976364, y: 20}
    removed: false
    selectable: true
    selected: false
}
{
    classes: 'draft-entity'
    data: {
        id: 'rkb2'
        type: 'person'
        displayName: 'Jane'
        elementType: 'node'
    {
    grabbable: true
    group: "nodes"
    locked: false
    pannable: false
    position: {x: 237, y: 149}
    removed: false
    selectable: true
    selected: false
}

When the nodes and edges are added to the graph, they are not rendered in the position in which they were when the graph was saved. I'm not sure what I'm doing wrong here. I've checked a couple of threads that mentioned using the 'preset' layout, but the way I'm implementing it doesn't seem to be working.