如何使用Grid Component将我的一个元素放在react位置而不重叠？

import { Grid } from 'grid-component-library';

render() {
  const gridProps = {
    rows: 3, // 网格的行数
    columns: 3, // 网格的列数
    areas: [
      ['header', 'header', 'header'], // 定义网格区域
      ['sidebar', 'content', 'content'],
      ['footer', 'footer', 'footer']
    ],
    gap: '10px' // 元素之间的间距
  };

  return (
    <Grid {...gridProps}>
      <div gridArea="header">Header</div>
      <div gridArea="sidebar">Sidebar</div>
      <div gridArea="content">Content</div>
      <div gridArea="footer">Footer</div>
    </Grid>
  );
}