` const regionNames = new Intl.DisplayNames([‘en’], { type: ‘region’ });

function App() {
  const [country, setCountry] = useState('');
  const [region, setRegion] = useState('');
  const [city, setCity] = useState('');
  const [fetchAttempted, setFetchAttempted] = useState(false);

  useEffect(() => {
    setFetchAttempted(true);
    fetch('/api/location')
      .then(response => response.json())
        .then(data => {
        const decodedCity = decodeURIComponent(data.city.replace(/+/g, ' '));
        if (decodedCity === "unknown") {
          fetch('https://freeipapi.com/api/json/')
            .then(response => response.json())
            .then(externalData => {
              const externalDecodedCity = decodeURIComponent(externalData.cityName.replace(/+/g, '     '));
              setCountry(externalData.countryCode);
              setCity(externalDecodedCity);
              console.log(externalData);
            })
            .catch(error => console.error('Fetch error on external API:', error));
       } else {
          setCountry(data.country);
          setRegion(regionNames.of(data.country.toUpperCase()));
          setCity(decodedCity);
          console.log(data);
        }
      })
      .catch(error => console.error('Fetch error on local API:', error));
  }, []);

  useEffect(() => {
    // Store the original body style
    const originalStyle = document.body.style.cssText;

    // Set the new background style
    document.body.style.backgroundImage = "url('https://i.ibb.co/94dykKW/bg.gif')";
    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundPosition = 'center';
    document.body.style.backgroundRepeat = 'no-repeat';
    document.body.style.minHeight = '100vh';

    // Reset to the original style on component unmount
    return () => {
      document.body.style.cssText = originalStyle;
    };
  }, []);

  const imageUrls = [
    '/ibb/HpHvhPY/photo-2024-03-01-22-13-20.jpg',
    '/ibb/tD4dq67/photo-2024-03-01-22-13-18.jpg',
    '/ibb/vzrfGzV/photo-2024-03-01-22-13-17.jpg',
    '/ibb/mDTtw3z/photo-2024-03-01-22-13-15.jpg',
    '/ibb/mGDhDSK/photo-2024-03-01-22-13-14.jpg',
    '/ibb/crwgsnb/photo-2024-03-01-22-13-12.jpg',
        '/ibb/XWkXYgQ/photo-2024-03-01-22-13-11.jpg',
    '/ibb/ZX8kvHN/photo-2024-03-01-22-13-03.jpg'
  ];

  return (
      <Router>
    <Routes>
      <Route path="/" element={
    <div className="container" >
      <img 
        src="/assets/CJkDD96k2jOfuywnYhgP/media/65a51f792aaf1b036608af13.png" 
        alt="Header Image"
        className="header-image"
      />
      <Swiper
        effect={'coverflow'}
        grabCursor={true}
        centeredSlides={true}
        loop={true}
        slidesPerView={'3'}
        coverflowEffect={{
        rotate: 15,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
       }}
      autoplay={{ 
        delay: 2000,
        disableOnInteraction: false,
      }}
      modules={[EffectCoverflow, Pagination, Navigation, Autoplay]}
      className="swiper-container"
    >
      {imageUrls.map(url => (
        <SwiperSlide key={url} className="swiper-slide">
          <img src={url} alt="slide_image"/>
        </SwiperSlide>
      ))}
        <div className="slider-controler">
          <div className="swiper-pagination"></div>
        </div>
      </Swiper>`

i need help to fix this code to display state country and flag
like the picture i stated

i need help please i have try several hour to correct this but is not working please some one should help me

i have try several hour to fix this issue but am not getting it right the why i want someone to help me correct this i need it to display on a landing page am working on

please i need help urgently