如何计算数据项数组中的重复项，并通过react视图显示此结果？

import React, { useState } from 'react';

const DuplicateItems = () => {
  const [dataItems, setDataItems] = useState(['item1', 'item2', 'item3', 'item1', 'item4', 'item2']);
  const [duplicateCount, setDuplicateCount] = useState(0);

  const calculateDuplicates = () => {
    const itemCounts = dataItems.reduce((counts, item) => {
      counts[item] = (counts[item] || 0) + 1;
      return counts;
    }, {});

    const duplicates = Object.values(itemCounts).filter(count => count > 1);
    setDuplicateCount(duplicates.length);
  };

  return (
    <div>
      <button onClick={calculateDuplicates}>计算重复项</button>
      <p>重复项数量：{duplicateCount}</p>
      <ul>
        {dataItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default DuplicateItems;