handles overlapping on each other (code in comments)

[worldly junco]

Hey guys, so I'm facing this problem where the markers are overlapping on each other in one custom node and doesn't in other type but the code is almost exactly same wrt to <Handle>

code in body

// custom node that doesn't overlap
<>
          {Object.entries(data.children).map(([id, props]) =>
            isShow == true ? (
              <div key={"i-" + id} style={{ ...style.io }}>
                {props.label}

                <Handle
                  type="target"
                  position="left"
                  id={"in_" + id}
                  style={{ ...style.handle, ...style.left }}
                />
                <Handle
                  type="source"
                  position="right"
                  id={"out_" + id}
                  style={{ ...style.handle, ...style.right }}
                />
              </div>
            ) : (
              <div key={"i-" + id}>
                <Handle
                  type="target"
                  position="left"
                  id={"in_" + id}
                  style={{ ...style.handle }}
                />
                <Handle
                  type="source"
                  position="right"
                  id={"out_" + id}
                  style={{ ...style.handle }}
                />
              </div>
            )
          )}
        </>

// custom node that overlaps

<>
            {Object.entries(data.children).map(([id, props]) => (
              <div
                key={"i-" + id}
                className={
                  selectedColumn === data.children[id].label
                    ? "column-name column-name--selected"
                    : "column-name"
                }
                onMouseEnter={() => {
                  setSelectedColumn(props.label);
                }}
                onMouseLeave={() => setSelectedColumn("")}
              >
                <div className="column-name__inner">
                  <div className="column-name__name">
                    {/* {props.isKey && <KeyIcon />} */}
                    {props.label}
                  </div>
                  <div className="column-name__type">{props.type}</div>

                  <div
                    className="column-name__description"
                    // dangerouslySetInnerHTML={{
                    //   __html: markdown(props.description || "No description."),
                    // }}
                  />
                </div>
                {console.log("ID!!",id)}
                
                <Handle
                  type="target"
                  position="left"
                  id={"in_" + id}
                  className={"left-handle"}
                />

                <Handle
                  type="source"
                  position="right"
                  id={"out_" + id}
                  className={"right-handle"}
                />
              </div>
            ))}
          </>

[worldly junco]

handles overlapping on each other (code in comments)

[exotic otter]

It seems that some styles are missing. In first example some styles get destructed into the Handle component. In the second example that is not the case.