如何使用react向初始化状态的Map添加值？

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_VALUE':
      return new Map([...state, ...action.payload]);
    default:
      return state;
  }
}

function MyComponent() {
  const [mapState, dispatch] = useReducer(reducer, new Map());

  // 添加值的函数
  function addValue(key, value) {
    dispatch({
      type: 'ADD_VALUE',
      payload: [[key, value]],
    });
  }

  return (
    <div>
      <button onClick={() => addValue('key1', 'value1')}>添加值</button>
      <p>当前Map状态: {Array.from(mapState)}</p>
    </div>
  );
}