如何使用flex将图像作为图标动态加载到TileList中？

import React from 'react';
import { TileList, Flex } from '@tencentcloud/react-components';

const dataSource = [
  { id: 1, url: 'https://example.com/image1.png' },
  { id: 2, url: 'https://example.com/image2.png' },
  { id: 3, url: 'https://example.com/image3.png' },
];

const MyComponent = () => {
  const renderItem = (item) => {
    return (
      <Flex direction="column" alignItems="center">
        <img src={item.url} alt={item.id} />
        <p>{item.id}</p>
      </Flex>
    );
  };

  return (
    <TileList
      dataSource={dataSource}
      renderItem={renderItem}
      column={3}
      rowGap={10}
      columnGap={10}
    />
  );
};

export default MyComponent;