message: refactor(handle): forward ref closes closes
diff: -import React, { memo, useContext, useCallback, FC, HTMLAttributes } from 'react';
  +import React, { memo, useContext, useCallback, HTMLAttributes, forwardRef } from 'react';
  import cc from 'classcat';
  import { useStoreActions, useStoreState } from '../../store/hooks';
  @@ -9,7 +9,11 @@ import { onMouseDown, SetSourceIdFunc, SetPosition } from './handler';
  const alwaysValid = () => true;
  -const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
  +export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
  +
  +const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
  + (
  + {
  type = 'source',
  position = Position.Top,
  isValidConnection = alwaysValid,
  @@ -19,7 +23,9 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
  children,
  className,
  ...rest
  -}) => {
  + },
  + ref
  + ) => {
  const nodeId = useContext(NodeIdContext) as ElementId;
  const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
  const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
  @@ -92,12 +98,14 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
  data-handlepos={position}
  className={handleClasses}
  onMouseDown={onMouseDownHandler}
  + ref={ref}
  {...rest}
  >
  {children}
  </div>
  );
  -};
  + }
  +);
  Handle.displayName = 'Handle';
  