React Hooks - измененное состояние не отображается сразу

Я пытаюсь преобразовать класс в компонент без сохранения состояния с помощью ловушек React.

Сам компонент очень прост, и я не понимаю, где я делаю ошибку, так как это почти копипаст из документации по реакции.

Компонент показывает всплывающее окно, когда пользователь нажимает кнопку (кнопка передается через реквизиты моему компоненту). Пользуюсь typescript.

Я прокомментировал строку, которая не выполняет то, что я хочу, в версии для hooks

Вот мой оригинальный класс:

export interface NodeMenuProps extends PropsNodeButton {
  title?: string
  content?: JSX.Element
  button?: JSX.Element
}
export interface NodeMenuState {
  visible: boolean
}
export class NodeMenu extends React.Component<NodeMenuProps, NodeMenuState> {
  state = {
    visible: false
  }

  hide = () => {
    this.setState({
      visible: false
    })
  }

  handleVisibleChange = (visible: boolean) => {
    this.setState({ visible })
  }

  render() {        
    return (
      <div className = {this.props.className}>
        <div className = {styles.requestNodeMenuIcon}>
          <Popover
            content = {this.props.content}
            title = {this.props.title}
            trigger = "click"
            placement = "bottom"
            visible = {this.state.visible}
            onVisibleChange = {this.handleVisibleChange}
          >
            {this.props.button}
          </Popover>
        </div>
      </div>
    )
  }
}

Вот версия для React hooks:

export interface NodeMenuProps extends PropsNodeButton {
  title?: string
  content?: JSX.Element
  button?: JSX.Element
}    
export const NodeMenu: React.SFC<NodeMenuProps> = props => {
  const [isVisible, setIsVisible] = useState(false)      

  const hide = () => {
    setIsVisible(false)
  }

  const handleVisibleChange = (visible: boolean) => {
    console.info(visible) // visible is `true` when user clicks. It works
    setIsVisible(visible) // This does not set isVisible to `true`.
    console.info(isVisible) // is always `false` despite `visible` being true.
  }      

  return (
    <div className = {props.className}>
      <div className = {styles.requestNodeMenuIcon}>
        <Popover
          content = {props.content}              
          title = {props.title}
          trigger = "click"
          placement = "bottom"
          visible = {isVisible}
          onVisibleChange = {handleVisibleChange}
        >
          {props.button}
        </Popover>
      </div>
    </div>
  )
}