How to Align react-flow__renderer to Top-Left (0,0) with fitView in React Flow?

I'm using React Flow to build a node-based diagram interface. When I render the diagram and apply fitView, the react-flow__renderer does not start at the top-left corner (0,0). Instead, there's an empty margin or padding space on the left and top (highlighted in yellow in the image below), which I'd like to remove.

I want the react-flow__renderer container to start exactly at the top-left (0,0) of its parent, without any extra space or offset. fitView seems to center the content, but I need it aligned to the top-left corner instead.

Here's a simplified version of the code I’m using for setting up the React Flow component:

<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChangeCustom}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypes}
fitView
panOnScroll
selectionOnDrag
fitViewOptions={{
 padding: 0.5,
}}
className={` nowheel ml ${isEditMode ? 'bg-yellow-50' : ''} `}
>
<Background />
</ReactFlow> 

How can I make the react-flow__renderer start at the exact top-left (0,0) of its container without any offset? Is there a way to configure fitView or the React Flow container to achieve this?

As far as I understand, you want your nodes to start from the top left corner. There is a simple way to do this. Remove the fitView prop. Set your top node to position: { x: 0, y: 0 }. Set the values ​​of the other nodes accordingly. As an example, I am adding the following definition code. I hope this helps.

const initialNodes = [
  {
    id: '1',
    data:{label:'Component 1'},
    position: { x: 0, y: 0 },
  },
  {
    id: '2',
    data:{label:'Component 2'},
    position: { x: 0, y: 100 },
  },
];