ReactFlow Graph doesn't re-render when updated

Question

I put a ReactFlow component to my Angular project, that shows the graph perfectly when initializing the component. Whenever I update the graph e.g. by changing the direction or updating the nodes, the "onLayout" method is called, however the graph won't update. It will continuously show the first graph.

export const CustomReactComponent: React.FunctionComponent<AppProps> = ({propNodes,propEdges }: AppProps) => {

  const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
    propNodes,
    propEdges,
    'LR'
  );
   
  const [nodes, setNodes, onNodesChange] = useNodesState(layoutedNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedEdges);

  const onLayout = useCallback(
    (direction) => {
      const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
        propNodes,
        propEdges,
        direction
      );
      
      setNodes([...layoutedNodes]);
      setEdges([...layoutedEdges]);
    },
    [nodes, edges]
  );
  

  return (
    <>
      <div className="layoutflow">
        <ReactFlow
          nodes={layoutedNodes}
          edges={layoutedEdges}
          nodeTypes={nodeTypes}
          onNodesChange={onNodesChange}
          onEdgesChange={onEdgesChange}
          onConnect={onConnect}
          connectionLineType={ConnectionLineType.SmoothStep}
          style={{ height: 500 }}
          nodesDraggable={true}
          fitView
        />
        <div className="controls"> 
          <button className="w3-button w3-green w3-left-align commonFont" onClick={() => onLayout('TB')}>vertical layout</button>
          <button className="w3-button w3-green w3-left-align commonFont" onClick={() => onLayout('LR')}>horizontal layout</button>
        </div>
      </div>
    </>

  );
};

I took most of the code from the React Website. Does anyone see the problem?

Here is the rest of the code that initializes the graph, which I didn't change:

The component is called in Angular from a Wrapper, by the following function:

private render() {
            if(this.graph === undefined){
                console.log("Graph still undefined");
            }else{
                ReactDOM.render(
                    <React.StrictMode>
                        <div>
                            <CustomReactComponent propNodes={this.graph.nodes} propEdges={this.graph.edges}/>
                        </div>
                    </React.StrictMode>
                    , this.containerRef.nativeElement);
            }
    }