如何让按钮更改react原生中显示的组件？

import React, { useState } from 'react';

const MyComponent = () => {
  const [displayedComponent, setDisplayedComponent] = useState('ComponentA');

  return (
    <div>
      {displayedComponent === 'ComponentA' && <ComponentA />}
      {displayedComponent === 'ComponentB' && <ComponentB />}
      <button onClick={() => setDisplayedComponent('ComponentB')}>
        Switch to Component B
      </button>
    </div>
  );
};