React Map

I need to enhance a React Admin supplier page to include a professional, interactive world map view that displays suppliers on a real map with proper geography. Requirements:

  1. Use a proper mapping library (like Leaflet.js) - NOT custom SVG drawings
  2. Real world map with accurate geography, countries, and coastlines
  3. Interactive controls: pan, zoom, mouse wheel support
  4. Clickable supplier markers that navigate to supplier detail pages
  5. Professional UI with map legend and controls
  6. Toggle between list and map view
  7. Position suppliers by country with slight offsets to avoid overlap

The current supplier data has fields: Id, CompanyName, ContactName, City, Country, etc.

Please install the necessary mapping library dependencies and create a production-ready map component that looks professional like Google Maps, not a hand-drawn cartoon map.