Type 'RefObject<JqxGrid>' is not assignable to type 'LegacyRef<HTMLDivElement>'

I’m looking into this react code and want to achieve the following:

Instead of using <div id="jqxGrid" ref={this.gridElement} /> in the code below

<div style={{ overflow: "hidden" }}>
              <div id="jqxGrid" ref={this.gridElement} />
              <div style={{ marginTop: 10, height: "15%" }}>
                The S&P 500 index finished 2011 less than a point away from where it
                ended 2010 -- 0.04 points down to be exact. That's the smallest
                annual change in history. At its peak in April, the S&P had climbed
                more than 8%. But by October, at the lowest levels of the year, it
                was down more than 12%. The Nasdaq, meanwhile, lost 1.8% for the
                year.
              </div>
            </div>

I want to use <div id="jqxGrid" ref={this.myGrid} /> mainly because I want to access jQXGrid related methods.For example - if I’ve to define the following deleteRowClick method inside the constructor,below props, something like this:

constructor(props: {}) {
    super(props);

      const deleteRowClick = () => {
                const selectedrowindex = this.myGrid.current.getselectedrowindex();
                
            }

it won’t complain if I use this.myGrid.current.getselectedrowindex();. However, it does complain if I’ve to use

this.gridElement.current.getselectedrowindex();

The error I see in my Visual Studio Code when I use <div id="jqxGrid" ref={this.myGrid} /> is the following:

Type ‘RefObject’ is not assignable to type ‘LegacyRef’.
Type ‘RefObject’ is not assignable to type ‘RefObject’.
Type ‘JqxGrid’ is missing the following properties from type ‘HTMLDivElement’: align, addEventListener, removeEventListener, accessKey, and 237 more.ts(2322)
index.d.ts(95, 9): The expected type comes from property ‘ref’ which is declared here on type ‘DetailedHTMLProps<HTMLAttributes, HTMLDivElement>’

I couldn’t find any react based forum and hence posting it here.