Клонирование индекса массива объектов в javascript (клиентский ReactJS) и возврат представления на основе нового массива с использованием метода карты

У меня есть приложение ReactJS, в одном компоненте у меня есть таблица, и я создаю каждую строку таблицы, используя метод map () в представлении компонентов (JSX), где каждая отдельная строка имеет кнопку-дубликат, чтобы пользователь мог дублировать строку и видеть ее под элемент, на который они нажали. например: если пользователь нажимает кнопку дублирования второй строки, я хочу клонировать индекс 1 массива данных страницы и обновить представление компонента на основе нового массива.

вот упрощенный код:

import React, {useState} from 'react';

const MyComponent = () => {
const [PageData, setPageData] = useState([
  {name: "item1", id: "1"},
  {name: "item2", id: "2"},
  {name: "item3", id: "3"}
])
 const duplicateItem = (RowItem, i) => {
  let RowsData = [...PageData];
  let Index = parseInt(i + 1);
  RowsData.splice(Index, 0, Duplicate);
  setPageData(RowsData);
 }

return (
  <div>
   {PageData.map((Item, i) =>(
      <div className = "form-row" key = {i}>
       <p>{Item.name}</p>
        <button
           onClick = {() => duplicateItem(Item, i)}
           className = "duplicate"
        >
        </button>
      </div>
    ))}
  </div>
 )
}
export default MyComponent;

что мы ожидаем, так это то, что когда пользователь нажимает кнопку дублирования, строка добавляется под элементом, на который нажал пользователь (если они дублируют второй элемент, его дубликат появится под вторым элементом), я не Я не знаю, почему этот код не работает, и сегодня мой крайний срок, поэтому мне нужна помощь.