我试图根据对象文件的属性（一个数字）生成组件。每次我尝试时，我都会收到一个错误消息，说当前父组件得到的子组件太多。
假设files属性为5，有人知道如何在Grid项中为每个文件夹生成5个div吗？

{folders.map((folder, index) => (
        <Grid item key={index} xs={4}>
          <CustomItem>
            <div style={{ display: "flex", flexDirection: "column" }}>
              <CustomTypography>{folder.title}</CustomTypography>
              {/* <CustomTypography>{deck.message}</CustomTypography> */}
            </div>
            <Button
              onClick={() => handleDelete(folder._id)}
              sx={{
                position: "absolute",
                top: "10px",
                right: "0px",
                width: "10px",
              }}
            >
              <DoDisturbOnIcon />
            </Button>
            <Button
              onClick={() => handleAddFile(folder._id)}
              sx={{
                position: "absolute",
                top: "10px",
                left: "0px",

                borderLeftColor: "0px",
                width: "10px",
              }}
            >
              <AddCircleIcon />
            </Button>
          </CustomItem>
        </Grid>
      ))}

我基本上是这样做的：

{for (let i = 0; i < folder.files + 1; i++) {
return <CustomItem>
}}