如何在react中创建功能组件并使用破坏性赋值？(我写了一些代码，但无法工作)

import React from 'react';

const MyComponent = ({ prop1, prop2 }) => {
  // 使用破坏性赋值获取传入的props
  const { value1, value2 } = prop1;
  
  // 在组件中使用props和破坏性赋值
  return (
    <div>
      <h1>{value1}</h1>
      <p>{value2}</p>
    </div>
  );
};

export default MyComponent;

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  // 创建一个包含props的对象
  const prop1 = {
    value1: 'Hello',
    value2: 'World'
  };

  return (
    <div>
      <h1>My App</h1>
      <MyComponent prop1={prop1} />
    </div>
  );
};

export default App;