How to keep a node selected when clicking on pane - React flow

Question

I'm developing a website when you can select multiple nodes to perform certain operations. I'd like to keep all the nodes I have clicked on "selected" i.e with the border colored. In fact, if I've selected a bunch of nodes and then I click on the pane, their border return to be the default, uncolored ones. The node above is selected while the lower one isn't. The problem is that if I try to console.debug(node.selected) after I have selected some nodes and clicked on the pane, the log is true, so the node is selected without any visual feedback.

I tried to manually set node.selected = true on every node inside the array of currently selected node without success:

if (sensitivityModalStatus==="selection"){
  setNodes(nodes.map(node => {
    if (selectedNodes.includes(parseInt(node.id))){
      node.selected = true
    }
    return node;
  ));
}

I also tried to set the function onPaneClick to undefined if the status of the program wasn't the selection one.

onPaneClick={sensitivityModalStatus!=="selection" ? onPaneClick : undefined}

Answer 1

I wanted nodes in my application to stay selected after being dragged, and was able to do so programmatically by tying this logic to the onNodeDragStop prop of the React Flow instance. It's essentially reinserting the node to React Flow's nodes array with only the addition of the selected boolean, which seemingly does not support dynamic property modification.

const onNodeDragStop = (event, node) => { 
  const newNodes = nodes.map((n) => {
    if (n.id === node.id) {
      return {
        ...n,
        selected: true,
      };
    } else {
      return {
        ...n,
        selected: false,
      };
    }
  });
  setNodes(newNodes);
};