Chakra UI doesn't work with react-split-pane

I'm using chakra-ui, along with react-split-pane.

If I use one or the other, it'll work well. If I use them together, the page is blank with no console error message. Here's three examples.

Using them together:

CodeSandbox: https://codesandbox.io/s/patient-worker-x65r5?file=/src/index.js

// Doesn't work, page is blank w/ no error message.

import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider } from "@chakra-ui/react"
import SplitPane from "react-split-pane";

export function Test() {
    return(
        <ChakraProvider>
            <SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
                <div>123</div>
                <div>456</div>
            </SplitPane>
        </ChakraProvider>
    )
}

ReactDOM.render(
    <Test />,
    document.getElementById("root")
);

Using just react-split-pane:

// Works perfectly

export function Test() {
    return(
         <SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
             <div>123</div>
             <div>456</div>
         </SplitPane>
    )
}

Using just chakra-ui:

// Works perfectly

export function Test() {
    return(
        <ChakraProvider>
             <div>123</div>
             <div>456</div>
        </ChakraProvider>
    )
}

Any ideas as to what could be happening here?

I'm using React+Typescript with webpack.