在react本机中每3行之后显示广告，未定义不是react本机中的对象(计算'item[0].type')

import React, { useState } from 'react';

const App = () => {
  const [counter, setCounter] = useState(0);

  const data = [
    { type: 'text', content: '行1' },
    { type: 'text', content: '行2' },
    { type: 'text', content: '行3' },
    { type: 'ad', content: '广告1' },
    { type: 'text', content: '行4' },
    { type: 'text', content: '行5' },
    { type: 'text', content: '行6' },
    { type: 'ad', content: '广告2' },
    // 其他行...
  ];

  const renderRows = () => {
    return data.map((item, index) => {
      if (index % 3 === 0 && index !== 0) {
        return (
          <React.Fragment key={index}>
            <div>广告内容：{item.content}</div>
            <div>{item.content}</div>
          </React.Fragment>
        );
      } else {
        return <div key={index}>{item.content}</div>;
      }
    });
  };

  return <div>{renderRows()}</div>;
};

export default App;