无法使用React useState更新单个数组项目中的className

import React, { useState } from 'react';

const App = () => {
  const [items, setItems] = useState([
    { id: 1, name: 'item 1', className: 'class1' },
    { id: 2, name: 'item 2', className: 'class2' },
    { id: 3, name: 'item 3', className: 'class3' },
  ]);

  const updateClassName = (itemId, newClassName) => {
    const updatedItems = items.map(item => {
      if (item.id === itemId) {
        return { ...item, className: newClassName };
      }
      return item;
    });

    setItems(updatedItems);
  };

  return (
    <div>
      {items.map(item => (
        <div key={item.id} className={item.className}>
          {item.name}
        </div>
      ))}
      <button onClick={() => updateClassName(2, 'newClass')}>
        Update className
      </button>
    </div>
  );
};

export default App;