Grommet v2 `List` raise an error when used with next.js v13 app router

Question

Description

1. We are using Next.js v13 app router with Grommet v2.
2. We are using tsx as our file extention.
3. We are using the List element with children.

Code

// page.tsx

'use client';

import { Grommet, Text, Box, List } from 'grommet';

export default function Page() {
  return (
    <Grommet>
      <Box>
      <List data={[ 'abc', 'def' ]} border={false}>
        {
          (datum) => (
          <Box direction='row' justify='between'>
            <Text>{datum}</Text>
          </Box>)
        }
      </List>
      </Box>
    </Grommet>
  );
}

Result

Run npm run build:

./app/page.tsx:10:9
Type error: Type '(datum: any) => Element' is not assignable to type '((...args: any[]) => any) & ReactNode'.
  Type '(datum: any) => Element' is not assignable to type '((...args: any[]) => any) & string'.
    Type '(datum: any) => Element' is not assignable to type 'string'.

   8 |       <Box>
   9 |       <List data={[ 'abc', 'def' ]} border={false}>
> 10 |         {
     |         ^
  11 |           (datum) => (
  12 |           <Box direction='row' justify='between'>
  13 |             <Text>{datum}</Text>

Question

How to resolve it?