HTML Select 元素不会更改一次状态

如何解决HTML Select 元素不会更改一次状态

我正在填充一个选择选项列表，其中包含来自该 api 的提供者的数据，并且当第一次在 HTML 选择元素中选择一个选项时，这不会改变状态（返回一个 enpty 字符串）和第二次，使用第一个选定元素的值而不是第二个元素的值更改它。我想了解这一点，但没有成功。我正在使用 Typescript 和 React 钩子。

interface Country {
  name: string,translations:{
    pt: string
  },flag: string,id: number
}

interface Cards {
  id: number,countryName: string,countryFlag: string,local: string,goal: string
}

const Home: React.FC<CardProps> = ({ ...props }) => {

  const [country,setCountry] = useState<string[]>([])
  const [selectedCountry,setSelectedCountry] = useState('')
  const [countryName,setCoutnryName] = useState('')
  const [countryFlag,setCountryFlag] = useState('')
  const [local,setLocal] = useState('')
  const [goal,setGoal] = useState('')
  const [cards,setCards] = useState<Cards[]>([])
  const [cardId,setCardId] = useState<number[]>([])
  const [cardCountryName,setCardCountryName] = useState<string[]>([])
  const [cardCountryFlag,setCardCountryFlag] = useState<string[]>([])
  const [cardLocal,setCardLocal] = useState<string[]>([])
  const [cardGoal,setCardGoal] = useState<string[]>([])
  const [requestCount,setRequestCount] = useState(0)


  useEffect(() => {
    try {
      axios.get<Country[]>('https://restcountries.eu/rest/v2/all').then(response => {
        const countriesList = response.data.map(country => country.name)
        setCountry(countriesList)
      })
    } catch (error) {
      console.log(error)
    }
  },[])


  const handleSelectedCountry = (e: ChangeEvent<HTMLSelectElement>) => {
    let val = e.target.value
    setSelectedCountry(val)
  }


  const newCard = async (e: FormEvent) => {

    e.preventDefault()


      await axios.get<Country[]>(`https://restcountries.eu/rest/v2/name/${selectedCountry}`)
        .then(response => {
          const transalations = response.data.map(item => item.translations.pt)
          const { flag } = response.data[0]
          console.log(response.data[0])
          setCountryFlag(flag)
          setCoutnryName(transalations[0])
          console.log(countryName)  //HERE countryName = '' for the first request
         // and returns the value of the first request in the second request
         
        })
        
        
        if(countryName){

          const id = cards.length + 1
          const newLocal = local
          const newGoal = goal
          
          await axios.post('http://localhost:3333/cards',{
            "id": id,"countryName": countryName,"countryFlag": countryFlag,"local": newLocal,"goal": newGoal
          }).then(response => console.log(response))
          console.log(countryFlag)
          console.log(countryName)
        }
  
      const resetForm = document.querySelector('form')
      resetForm?.reset()
  
      setSelectedCountry('')
      setGoal('')
      setLocal('')
      setRequestCount(requestCount + 1)
    }

  }

  return (

    <div>
    <form>
    <select name='country'
              id='country-name'
              onChange={handleSelectedCountry}
            >
              <option placeholder="Selecione um país">Selecione um país</option>
              {country.sort().map((item,index) => (
                <option key={index} value={item}>{item}</option>
              ))}
     </select>
     <button type='submit' onClick={newCard}/>
     </form>
    </div>
)
}```