在我的React应用程序中，我正在渲染一些块：

const MyBlocks = ({ id }: { id: string }) => {
  const { data, loading } = useQuery<GqlRes>(BlocksQuery, {
    ssr: false,
    errorPolicy: 'all',
    variables: {
      blocksId: parseInt(id, 10),
    },
  });

  if (loading) {
    return <CircularProgress />;
  }

  return (
    <React.Fragment>
      {data?.blocks.map((item, i) => (
        <Block key={String(i)} data={item} />
      ))}
    </React.Fragment>
  );
};

export default MyBlocks;

当后端渲染的块超过3个时，我想在第三个块后添加一个 * 占位符 * <div>（由第三方脚本填充），这样我得到：

<Block>
<Block>
<Block>
<div id="placeholder" />
<Block>
<Block>

我该怎么做呢？有什么好的解决方案吗？