I have this Index.js page which through serverSideProps return all consumptions represented by an interface from a mock up json file. My goal is to pass the result to a component which uses DataGrid to display data to users and allow them to modify the values

export const getServerSideProps: GetServerSideProps = async () => {
   const consumptionsData: Consumption[] = await consumptionService.getAll();
   return {
       props: {
           consumptionsData: consumptionsData,
       },
   }
}

export default ConsumptionsGrid;

interface

export interface Consumption {
   ConsumptionID: number;
   CastingID: number;
   Elemento1: number;
   Elemento2: number;
   Elemento3: number;
   Elemento4: number;
   Elemento5: number;
};

I pass the result in this way

function ConsumptionsGrid(props: JSX.Element) {
  const [tableData, setTableData] = React.useState<GridRowModel[]>([]);

  React.useEffect(() => setTableData(props.consumptionsData.map()), [props, setTableData]); <-- consumptions.Data throw the error
  ...other code
  return (
        <div style={{ height: 400, width: 'auto' }}>
            <DataGrid
                experimentalFeatures={{ newEditingApi: true }}
                columns={columns}
                rows={data}
                rowCount={rowCountState}
                loading={isLoading}
                rowsPerPageOptions={[25]}
                pagination
                {...rowsState}
                paginationMode="server"
                onPageChange={(page) => setRowsState((prev) => ({ ...prev, page }))}
                onPageSizeChange={(pageSize) =>
                    setRowsState((prev) => ({ ...prev, pageSize }))
                }
            />
        </div>
    );
}

export { ConsumptionsGrid };

consumptionsData as written above throw this error

any
Property 'consumptionsData' does not exist on type 'Element'.ts(2339)

my question now is how do I have to characterize the props when I pass the argument in the component to handle it as I want?