Using split.js with React components

Question

I am trying to create a resizable map that would have Info cards about locations that are currently viewed on the map below the map component. Using Split.js to do it and it doesn't seem to work. It does show the gutter in between components but components don't get updated when the gutter is moved. For Map component i am using ReactMapGl with some basic props and the Info Cards are just basic cards form Material-UI.

import React from 'react';
import Split from 'react-split';
import InfoCard from './InfoCard';
import Map from './Map';
import './Full.css'

const Full = () => (

<Split
    className='split' 
    direction="vertical" 
    minSize={0} 
    sizes={[50, 50]} 
    gutterSize={10}
>

  <div>
    <Map/>
  </div>
  <div>
    <InfoCard/>
  </div>

</Split>
);

export default Full

css file

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-vertical {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    cursor: row-resize;
}

Sadly i can't provide any codesandbox.io links cause i would have to reveal my API code.