如何使用React中的条件在组件中呈现3个SVG中的1个？

import { ReactComponent as SVG1 } from '路径/到/svg1.svg';
import { ReactComponent as SVG2 } from '路径/到/svg2.svg';
import { ReactComponent as SVG3 } from '路径/到/svg3.svg';

import React, { useState } from 'react';

function MyComponent() {
  const [selectedSVG, setSelectedSVG] = useState(1);

  // 其他组件代码

  return (
    <div>
      {selectedSVG === 1 && <SVG1 />}
      {selectedSVG === 2 && <SVG2 />}
      {selectedSVG === 3 && <SVG3 />}
    </div>
  );
}

function MyComponent() {
  const [selectedSVG, setSelectedSVG] = useState(1);

  const handleSVGChange = (svgNumber) => {
    setSelectedSVG(svgNumber);
  };

  return (
    <div>
      {selectedSVG === 1 && <SVG1 />}
      {selectedSVG === 2 && <SVG2 />}
      {selectedSVG === 3 && <SVG3 />}
      
      <button onClick={() => handleSVGChange(1)}>显示SVG1</button>
      <button onClick={() => handleSVGChange(2)}>显示SVG2</button>
      <button onClick={() => handleSVGChange(3)}>显示SVG3</button>
    </div>
  );
}