React не перерисовывает компонент после обновления состояния

У меня есть код, который представлен ниже. Я ожидаю такое выведение: после нажатия на кнопку "Получить все пальцы" обновляется fingersNew и src в img меняет свое значение с finger на fingerActive. Но этого не происходит. Само состояние обновляется, данные приходят, но компонент перерисовываться не хочет. Буду благодарен, если подскажете, в чем моя ошибка.

import { FormWrapper } from './FormWrapper'
import { useState } from 'react'
import finger from './img/finger.svg'
import fingerActive from './img/finger-active.svg'
import axios from 'axios'

type Finger = {
  img: string
}

let _Fingers = new Map<string, Finger>()

type FingerprintsData = {
  fingerPrints: Map<string, Finger>
}

type FingerprintsDataProps = FingerprintsData & {
  updateFields: (fields: Partial<FingerprintsData>) => void
}

export function Fingerprints ({
  fingerPrints,
  updateFields
}: FingerprintsDataProps) {

  const [fingersNew, setFingersNew] = useState(_Fingers)
     
  async function getFingers () {
    const response = await axios.get('http://localhost:8000/bdfingers/' + 1)
    response.data.forEach(function (row: any) {
      _Fingers.set(String(row.tag), { img: row.img })
    })
    setFingersNew(_Fingers)
    console.log('FingersNew', fingersNew)
  }

  return (
    <FormWrapper title='форма'>
      <div></div>
      <img
        src={fingersNew.has('721') ? fingerActive : finger}
        alt='палец'
      />
      ...
  
      <button onClick={getFingers}>Получить все пальцы</button>
    </FormWrapper>
  )
}

Ответы (1 шт):

Автор решения: Константин Кадочников

Проблема была в том, что во время выполнения getFingers() в setFingersNew передавалось значение _Fingers до того, как он был наполнен и только после этого происходило наполнение _Fingers.

→ Ссылка