How to == async axios value

How to compare the value of the address? First returns null and then actual data

Main component

<List breed={breed} city={city} />

children

const List = ({ breed, city }) => {
...
return (
  <li  style={
    (<Adrress x={edge.node.location.lon} y={edge.node.location.lat} /> == city) ? { color: "green" } : { color: "red" }
  }>

…

Address component

export default function DataFteching({ x, y }) {
  const [adrress, setAdrress] = useState(null)
  const [loading, setLoading] = useState(true)
  const region = /place/
  useEffect(() => {
    async function FtechData() {
      const token = 'pk.eyJ1IjoiYW5kcmlpbXNuIiwiYSI6ImNrZGYzZ200YTJudXQyeHNjMjk2OTk2bjUifQ.njqMX6x6U946yjJdWwA7mA';
      await axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${x},${y}.json?access_token=${token}`)
        .then(res => {
          // console.log(res.data.features.find(place => place.id.match(region)).text)
          setAdrress(res.data)
        })
        .catch(err => console.log(err))
        .finally(() => setLoading(false));
    }
    FtechData();
  }, [])
  if (loading) return null;
  // console.log({ adrress.features.find(place => place.id.match(region)).text })
  return (adrress.features.find(place => place.id.match(region)).text)
}