在React钩子中添加with扩展运算符时出错

import React, { useState } from 'react';

const MyComponent = () => {
  const [state, setState] = useState({
    prop1: 'value1',
    prop2: 'value2',
  });

  const updateState = () => {
    setState({
      ...state,
      prop3: 'value3',
    });
  };

  return (
    <div>
      <button onClick={updateState}>Update State</button>
      <p>{state.prop1}</p>
      <p>{state.prop2}</p>
      <p>{state.prop3}</p>
    </div>
  );
};

export default MyComponent;