React state updating in the dom but not in function

I have an onClick event on an input field called handleLinkChange that validates its content (a YouTube link) and if it’s valid calls a function that extract its YouTube ids.

Within the onClick event I update the links state so the user sees if the link is valid and the extraction of ids is in progress (indicated by a loading wheel in the input field). At this point the state updates as desired in the DOM. However, when I arrive in the getIdsFromLink function after setting the state, the links state is still at the initial value. This makes it impossible to alter the links, for example to replace the loading indicator of the link with a checkmark when the ids have been parsed.

  // Links state
  const [links, setLinks] = useState([{ link: '', state: IS_VALID, errorMessage: '' }])

  // onChange event handler
  const handleLinkChange = (event, index) => {
    const clonedLinks = [...links]

    let value = decodeURI(event.target.value.trim())

    const { passesRegex, validityMessage } = checkLinkValidity(value)

    clonedLinks[index] = {
      link: value,
      state: passesRegex ? IS_VALIDATING_SERVER_SIDE : IS_ERROR,
      errorMessage: validityMessage,
    }

    setLinks(clonedLinks)

    if (clonedLinks[index] !== '' && passesRegex) {
      getIdsFromLink(clonedLinks[index].link, index)
    }
  }

  // Parser
  const getIdsFromLink = (link, index) => {
    console.log('links state', links) // initial state

    socket.emit('getIds', link)

    socket.on('idsParsed', newIds => {
      console.log('links state after parse', links) // initial state
    })
  }

  // Shortened return
  return (
      links.map((link, index) => (
        <Input
          value={link.link} 
          onChange={event => handleLinkChange(event, index)}
        />

      {link.link && (
        <FontAwesomeIcon
          icon={link.state === IS_VALID ? faCheck : link.state === IS_ERROR ? faTimes : faSpinner}
        />
      )}
    )
  ))

I know that states are asynchronous and I also tried watching for state changes with useEffect, but I’m unable to refactor my code in that way and I have another state object that heavily depends on the links state, so I gave up on that one.

Even when I try to use flushSync to update the state synchronously, I have the same effect.

I very much appreciate your help! Thanks!