React Data Grid Custom Row Renderer function in Typescript

I would like to convert the following RowRender() function to Typescript

const RowRenderer = ({ renderBaseRow, ...props }) => {
  const color = props.idx % 2 ? "green" : "blue";
  return <div style={{ color }}>{renderBaseRow(props)}</div>;
};

complete sample here: React Data Grid - Intercepting a row

My naive approach is

interface RowRender {
  idx: Number
};

const rowRenderer = ({ renderBaseRow, ...props }: {renderBaseRow: Function, props: RowRender}) => {
  const color = props.idx % 2 ? "green" : "blue";
  return <div style={{ color }}>{renderBaseRow(props)}</div>;
};

but vscode still not happy with props.idx

Property 'idx' does not exist on type '{ props: RowRender; }'.

How to fix that?

You will need to provide the typings for the RowRenderer component by declaring it as a functional component, with the required generic parameter. You may also refer to the typings over here.

interface IRowRender {
  renderBaseRow: (e: any) => void
  idx: number;
}

const rowRenderer: React.FC<IRowRender> = ({ renderBaseRow, ...props }) => {
  const color = props.idx % 2 ? "green" : "blue";
  return <div style={{ color }}>{renderBaseRow(props)}</div>;
};