Moving array of object from one array to another array on button click

I have two array of object and two button two move data from one to another after selecting a single or multiple data, but it is not working properly in Nextjs project.

Here is my code snippet! it works in certain case but failed in some cases also.

when I click the arrowfunction button it's work when slecting single data properly but give strange result selecting multiple data.

I have tried many other ways! but none of them was solving the problem. It would be great if anyone of you help in this problem.

  const [riskSummary, setRiskSummary] = useState<Ser[]>([
    {
      ser: {
        id: '1',
        url: 'https://example.com',
        text: '株式会社ABC 退会/解約率 - ブログ',
      },
      search_engine_source: {
        search_engine: SearchEngine.GooglePc,
        detail: SearchEngineDetail.Suggestion,
      },
      isChecked: false,
    },
    {
      ser: {
        id: '2',
        url: 'https://example.com',
        text: 'Longwebsitename|SampleSample|SampleSampleSampleSample...',
      },
      search_engine_source: {
        search_engine: SearchEngine.GooglePc,
        detail: SearchEngineDetail.Suggestion,
      },
      isChecked: false,
    },
  ]);

  const [neutralSummary, setNeutralSummary] = useState<Ser[]>([
    {
      ser: { id: '3', url: 'https://example.com', text: 'title' },
      search_engine_source: {
        search_engine: SearchEngine.GooglePc,
        detail: SearchEngineDetail.Suggestion,
      },
      isChecked: false,
    },
 {
      ser: { id: '4', url: 'https://example.com', text: 'title' },
      search_engine_source: {
        search_engine: SearchEngine.GooglePc,
        detail: SearchEngineDetail.Suggestion,
      },
      isChecked: false,
    },
 {
      ser: { id: '5', url: 'https://example.com', text: 'title' },
      search_engine_source: {
        search_engine: SearchEngine.GooglePc,
        detail: SearchEngineDetail.Suggestion,
      },
      isChecked: false,
    },

  ]);

  const handleRiskSummary = (index: number) => {
    const updatedListItems = [...riskSummary];
    updatedListItems[index].isChecked = !updatedListItems[index].isChecked;
    setRiskSummary(updatedListItems);
  };

  const handleNeutralSummary = (index: number) => {
    const updatedListItems = [...neutralSummary];
    updatedListItems[index].isChecked = !updatedListItems[index].isChecked;
    setNeutralSummary(updatedListItems);
  };

  const handleArrowLineRightClick = () => {
    const selectedItems = neutralSummary.filter((item) => item.isChecked);
    const updatedRiskSummary = [...riskSummary];
    const updatedNeutralSummary = neutralSummary.filter(
      (item) => !item.isChecked,
    );

    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // Generate unique IDs using uuidv4
        isChecked: false,
      };
      updatedRiskSummary.push(newItem);
    });

    setRiskSummary(updatedRiskSummary);
    setNeutralSummary(updatedNeutralSummary);
  };

  const handleArrowLineLeftClick = () => {
    const selectedItems = riskSummary.filter((item) => item.isChecked);
    const updatedNeutralSummary = [...neutralSummary];
    const updatedRiskSummary = riskSummary.filter((item) => !item.isChecked);

    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // Generate unique IDs using uuidv4
        isChecked: false,
      };
      updatedNeutralSummary.push(newItem);
    });

    setNeutralSummary(updatedNeutralSummary);
    setRiskSummary(updatedRiskSummary);
  };

          <List
            listItems={neutralSummary}
            listTitle="中立まとめ"
            onChange={handleNeutralSummary}
          />
        </Flex>

        <Flex
          direction="col"
          className="col-span-2 h-max self-center"
          alignItems="center"
        >
          <Button
            onClick={handleArrowLineRightClick}
            className="!bg-secondary hover:!bg-neutral"
            iconName="ArrowLineRight"
          />
          <Button
            onClick={handleArrowLineLeftClick}
            className="!bg-secondary hover:!bg-neutral"
            iconName="ArrowLineLeft"
          />
        </Flex>
        <Flex direction="col" className="col-span-5 h-max">
          <List
            listItems={riskSummary}
            listTitle="リスクまとめ"
            onChange={handleRiskSummary}
          />
        </Flex>

In the avobe code I have implemented my logic!

ALl the code logic here was right! but the problem was keeping the same text for three objects as title! when I changed the name to tiltle1,title2,title3, the problem solved