How do I change the position of the label in the Nodes of ReactFlow?

In ReactFlow, you can change the position of the label in the nodes using the nodeLabelComponent prop. The nodeLabelComponent prop allows you to pass a custom component to render the label in the nodes. You can then use CSS to style the label and position it as desired.

Here's an example of how to change the position of the label in the nodes using the nodeLabelComponent prop:

import React from 'react';
import ReactFlow, { Node } from 'react-flow-renderer';

const CustomNodeLabel = ({ data }) => {
  return (
    <div style={{ position: 'relative', top: '-20px' }}>
      {data.label}
    </div>
  );
};

const elements = [
  {
    id: '1',
    type: 'default',
    data: { label: 'Node 1' },
    position: { x: 100, y: 100 },
  },
];

const nodeTypes = {
  default: ({ data }) => <Node nodeLabelComponent={CustomNodeLabel} data={data} />,
};

const App = () => {
  return (
    <ReactFlow elements={elements} nodeTypes={nodeTypes} />
  );
};

In this example, we've defined a custom component CustomNodeLabel that renders the label for the nodes. We've positioned the label by setting the position to relative and the top to -20px. We've then passed this component to the nodeLabelComponent prop of the Node component.

Note that this is just an example and you may need to adjust the position of the label according to your specific needs.