refactor(elements): split edges and nodes

example/src/CustomNode/index.js

@@ -65,6 +65,8 @@ const CustomNodeFlow = () => {
   const onConnect = (params) =>
     setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els));
 
+  console.log('example', elements);
+
   return (
     <ReactFlow
       elements={elements}

example/src/Provider/Sidebar.js

@@ -2,10 +2,9 @@ import React from 'react';
 import { useStoreState, useStoreActions, isNode } from 'react-flow-renderer';
 
 const Sidebar = () => {
-  const elements = useStoreState((store) => store.elements);
+  const nodes = useStoreState((store) => store.nodes);
   const transform = useStoreState((store) => store.transform);
   const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
-  const nodes = elements.filter(isNode);
 
   const selectAll = () => {
     setSelectedElements(nodes.map((node) => ({ id: node.id, type: node.type })));