React does not recognize the `inputRef` prop on a DOM element

When I try to use react-json-view to render expandable row in a functional component in a table I get this error when I use onEdit method

React does not recognize the inputRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputref instead. If you accidentally passed it from a parent component, remove it from the DOM element

code

import { Table } from 'antd';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  }
];

<Table
  rowKey="id"
  columns={columns}
  dataSource={data}
  expandable={{
    expandedRowRender: (record) => (
      <ExpandedRow record={record} />
    ),
  }}
/>;

//ExpandedRow child component

import { FC } from 'react';
import ReactJson from 'react-json-view';

interface IExpandedRow {
  record: any;
}

const ExpandedRow: FC<IExpandedRow> = ({ record, ...rest }: IExpandedRow) => {
  const onEdit = (data: any) => {
    console.log(data);
  };

  return (
    <>
      <ReactJson
        {...rest}
        onEdit={onEdit}
        src={record}
      />
    </>
  );
};

export default ExpandedRow;

I tried to create ref and pass it to ExpandedRow component but I got the same error, am I doing something wrong here ?

[dranitski]

upvote the fix by @enricomad https://github.com/mac-s-g/react-json-view/pull/374 🆙

[enricomad]

@kulabros the issue is triggered by newer versions of react (compared to demo code), which the lib is not compatible with anymore. more details in #347