Error Message should Show only when the city name doesn't match using reactJS

I am having an Search box , when the user Enters 5 character or more, then it should full address in the search box , IT is working fine but now the issue is when the city name doesn't match it should show an error message.. Here the thing is , the error message is showing for both matched city name and unmatched city also.. How Can I solve this ? Please can anyone help me in this?

here is the code

import React, { useState } from 'react'
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as getallcoordiantes from '../../src/Redux/googlemaps/bigbasket.actions';

const GetGeoCoordinates = () => {

    const [storeDetails, setstoreDetails] = useState({
        name: ""
    });
    const [validCityName, setvalidCityName] = useState(false)
    const [refObj, setrefObj] = useState({
        geo: {
          lat: 32.776272,
          long: -96.796856,
        },
        name: "Dallas",
        palce: "US",
      });
    const [warning, setwarning] = useState("");
    const dispatch = useDispatch();
    const storeInfo = useSelector((state) => state.fetchAllData.storeInfo);

    useEffect(() =>{
        if(storeInfo?.features){
            //console.log(storeInfo?.features[0]?.place_name)
            //setstoreDetails({ name: storeInfo?.features[0]?.place_name });
            const coordinates = storeInfo?.features[0]
            ? storeInfo?.features[0].center
            : [];
            // console.log(coordinates);
            //console.log(storeInfo?.features[0]?.text);
            if(coordinates[0] === refObj.geo.long && coordinates[1] === refObj.geo.lat){
                if (refObj.name !== storeInfo?.features[0]?.text) {
                  setwarning("Entered City Name is Invalid");
                } else {
                  setstoreDetails({ name: storeInfo?.features[0]?.place_name });
                  setwarning("");
                }
              } else {
                setwarning("Please Enter a Valid City");
              }
             }        
    },[storeInfo])
    
    const hanldeChange = (e) => {
        let newStoreDetails = { ...storeDetails };
        newStoreDetails[e.target.name] = e.target.value;
        // console.log(newStoreDetails);
        setstoreDetails(newStoreDetails)
    }

    const getStoreDetails = () => {
        if(storeDetails.name.length <=4){
            setvalidCityName(true)
            // setwarning("");
        }else{
            setvalidCityName(false);
            // setwarning("");
            dispatch(getallcoordiantes.fetchcoordinates(storeDetails.name));
        }
    }

    useEffect(() => {
        getStoreDetails();
        // setvalidCityName(false);
        // setwarning("");
    }, [storeDetails?.name])
    

  return (
    <div>
    <h2>Search For Store</h2>
    <form>
        <input type="text" name="name" value={storeDetails.name} onChange={(e) => { hanldeChange(e) }} />
        <button onClick={getStoreDetails} type="button">Get Location</button>
    </form>
    {/* {validCityName &&  <p>Type Minimum 5 Characters</p>} */}
    <p>{warning}</p>
</div>
  )
}

export default GetGeoCoordinates