如何在reactjs中添加counrty name旁边的下拉菜单中的国家旗帜？

import React, { useState } from 'react';

const countries = [
  { code: 'us', name: 'United States' },
  { code: 'cn', name: 'China' },
  { code: 'jp', name: 'Japan' },
  // 其他国家...
];

const CountryDropdown = () => {
  const [selectedCountry, setSelectedCountry] = useState('');

  const handleCountryChange = (event) => {
    setSelectedCountry(event.target.value);
  };

  return (
    <div>
      <select value={selectedCountry} onChange={handleCountryChange}>
        <option value="">Select a country</option>
        {countries.map((country) => (
          <option key={country.code} value={country.code}>
            {country.name}
          </option>
        ))}
      </select>
      {selectedCountry && (
        <img
          src={`path/to/flags/${selectedCountry}.png`}
          alt={`${selectedCountry} flag`}
        />
      )}
    </div>
  );
};

export default CountryDropdown;