Trying to resize panel throws `getBoundingClientRect` error

[prvnbist]

Describe the bug
The error is consistent with any type of resize panel i.e LeftResizable, RightResizable etc. Clicking on the resize handle itself throws this error. A demo can be checkout out on codesandbox.

import { BottomResizable, Fill, LeftResizable, ViewPort } from "react-spaces";

import "./styles.css";

export default function App() {
  return (
    <ViewPort top="48px" bottom="32px">
      <LeftResizable size={280} minimumSize={280} maximumSize={380}>
        Left Sidebar
      </LeftResizable>
      <Fill>
        <Fill>Top Area</Fill>
        <BottomResizable
          size="380px"
          minimumSize="240px"
          maximumSize={window.innerHeight - 280}
        >
          Bottom Area
        </BottomResizable>
      </Fill>
    </ViewPort>
  );
}

To Reproduce
Steps to reproduce the behavior:

1. Go to codesandbox
2. Click on any resize handle
3. See error

Expected behavior
Expect it not throw any error while resizing.

Package versions (please complete the following information):

• React version: [18.0.0]
• React spaces version: [0.3.2]

Code sandbox link
codesandbox

[maerten]

Also noticed this issue with React 18

It seems like a partial fix could be adding the necessary dependencies to this hook: https://github.com/aeagle/react-spaces/blob/master/src/components/Space.tsx#L64

[elementRef.current]

This fixes the error in our app, but there were still some visible glitches

[maerten]

I've added a pull request with a different workaround: #113
@prvnbist could you please try it out in your React18 project?

package.json

-        "react-spaces": "^0.3.2",
+        "react-spaces": "github:maerten/react-spaces#react18-workaround",

[aeagle]

I've released version 0.3.3 which includes @maerten's fix.

[prvnbist]

Tested w/ react 18 and resizing a panel is working as expected. Attached a demo below. Thanks

Codesandbox