Wrapping a Pane in a custom React.Component prevents sorting

[fijiwebdesign]

Bug

Overview of the problem

I'm using react-sortable-pane ^1.0.0 and ^1.0.4
My browser is: Tested Chrome and Safari
I am sure this issue is not a duplicate

https://codesandbox.io/s/66367ox0z

Description

Passing a custom React.Component instead of <Pane> as children of <SortablePane> will prevent sorting the Panes.

Steps to Reproduce

I modified the initial example to:

function PaneItem({ key }) {
  return (
    <Pane
      key={key}
      defaultSize={{ width: "100%", height: 120 }}
      style={paneStyle}
    >
      <p style={textStyle}>00{key}</p>
    </Pane>
  );
}

export default function SimpleVertical() {
  const panes = [0, 1, 2].map(key => <PaneItem key={key} />);
  return (
    <div style={{ padding: "10px" }}>
      <SortablePane direction="vertical" margin={20}>
        {panes}
      </SortablePane>
    </div>
  );
}

Expected behavior

You should be able to pass a React.Component that wraps a <Pane>.

Actual behavior

No sorting available. The CSS shows the Panes are position:relative instead of position:absolute