How to modify based on JqxSplitter window width in React?

Question

import React, { useEffect, useRef } from 'react';
import * as ISO from 'src/framework/layout/LayerComponents';
import ISOInput from 'src/framework/components/controls/ISOInput';
import ISOGrid from 'src/framework/components/controls/ISOGrid';
import ISOAxios, { DataPackage } from 'src/framework/core/apis/ISOAxios';
import ISORoleButton, { ButtonType } from 'src/framework/components/controls/ISORoleButton';
import { alertType, e3 } from 'src/framework/core/utils/utils';
import ISONotification from 'src/framework/components/controls/ISONotification';
import { useDispatch, useSelector } from 'react-redux';
import { addTab } from 'src/framework/core/reducers/TabReducer';
import ISOButton from 'src/framework/components/controls/ISOButton';
import JqxSplitter from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
import axios from 'axios';
import {
  ISODialog,
  ISODialogTitle,
  ISODialogContent,
  ISODialogActions,
} from 'src/framework/components/controls/ISODialog';
import { nextTab, prevTab, removeTab, removeAll } from 'src/framework/core/reducers/TabReducer'; 
useEffect(() => {
    onSearch();
  }, []);

  }

  return (
              <JqxSplitter
                width="100%"
                height="100%"
                panels={[{ size: {leftSize} }, { size: {rightSize} }]}
                orientation={'vertical'}
              >
  );
}

export default LEGO203;

This is my current React source. panels={[{ size: {leftSize} }, { size: {rightSize} }]} I want to adjust the {leftSIze},{rightSize} by putting it in a variable according to the window width. I tried to control it with css, but it didn't work the way I wanted. I tried using jQuery, but it didn't work. How should I fix it?