“not assignable to type” error for Grommet List with Children in Typescript

I am using grommet component library for my react app and I tried using List component for one of my requirement. I referred grommet documentation :
Example

and accordingly tried using the List component with children using typescript. Below is my code:

    import React from 'react';
    import { Box, List, Tip, Text } from 'grommet';
    import { Gremlin } from 'grommet-icons';
    
    const dataList: { city: string; state: string }[] = [
      { city: 'Boise', state: 'Idaho' },
      { city: 'Fort Collins', state: 'Colorado' },
      { city: 'Bay Area', state: 'California' },
      { city: 'San Diego', state: 'California' },
    ];
    
    const renderListItem = (datum: { city: string; state: string }) => (
      <Tip content={datum.state} dropProps={{ align: { left: 'right' } }}>
        <Box direction="row-responsive" gap="medium" align="center">
          <Gremlin size="large" />
          <Text weight="bold">{datum.city}</Text>
        </Box>
      </Tip>
    );
    
    const Children: React.FC = () => (
      <Box pad="large" height="100%" align="center">
        <List data={dataList} pad="medium" border={false}>
          {renderListItem}
        </List>
      </Box>
    );
    
    export default Children;

But this gives me following error:

Type ‘(datum: { city: string; state: string;}) =>
React.JSX.Element’ is not assignable to type ‘(((…args: any[]) =>
any) & (string | number | boolean | ReactElement<any, string |
JSXElementConstructor> | Iterable | ReactPortal |
null)) | undefined’. Type ‘(datum: { city: string; state:
string;}) => React.JSX.Element’ is not assignable to type ‘((…args:
any[]) => any) & string’.
Type ‘(datum: { city: string; state: string;}) => React.JSX.Element’ is not assignable to type ‘string’.ts(2322)
index.d.ts(46, 3): The expected type comes from property ‘children’
which is declared here on type ‘IntrinsicAttributes &
ListExtendedProps<{ city: string; state: string; }> & { children?:
ReactNode; }’

const renderListItem: (datum: {
    city: string;
    state: string;
}) => React.JSX.Element

I see similar question on SO : Lists with Children in Grommet UI and TypeScript. But I dont see any answers there too. I tried by passing various types but all in vain.
Could any one please throw some light on this ?

Thanks