Gatsby useState не обновляет значение

Question

Я использую gatsby с функциональным компонентом и реагирую на перехватчики useState с пользовательским интерфейсом материалов и, в частности, для этой проблемы с помощью Dialog API для имитации поведения в этой документации: https://material -ui.com / components / dialogs / .

Но useState в openModal не обновляет значение состояния, поэтому модальное окно может быть закрыто только клавишей Esc.

import React, { useState } from "react"
import { Carousel } from "react-responsive-carousel"
import {
  Typography,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
} from "@material-ui/core"
import { makeStyles } from "@material-ui/styles"
import { Link } from "gatsby"

const useStyles = makeStyles(theme => {
  return {
    container: {
      height: "100%",
      width: "70%",
      [theme.breakpoints.up("lg")]: {
        width: "70%",
      },
      [theme.breakpoints.down("md")]: {
        width: "90%",
      },
    },
    carrusel: {
      height: "100%",
      width: "100%",
      maxWidth: "400px",
    },
    img: {
      width: "100%",
      height: "100%",
    },
    text: {
      color: "#000",
      padding: "25px",
      backgroundColor: "#fff",
      maxWidth: "400px",
      textTransform: "uppercase",
      textAlign: "center",
    },
    modal: {
      width: "95vw",
      maxHeight: "90vh",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
    },
    closeIcon: {
      height: "75px",
      width: "75px",
    },
    button: {
      backgroundColor: "#ed1c24",
      color: "#fff",
      textAlign: "center",
    },
    buttonFirst: {
      marginRight: "15px",
    },
    buttonContainer: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      marginTop: "25px",
      marginBottom: "75px",
    },
    link: {
      textDecoration: "none",
      color: "#fff",
    },
  }
})

export default ({ slides, text, ModalComponent }) => {
  const classes = useStyles()
  const [openModal, setOpenModal] = useState(false)

  const handleClose = () => {
    setOpenModal(false)
    console.log(openModal)
  }

  const handleOpen = () => {
    setOpenModal(true)
  }

  return (
    <div className={classes.container} onClick={handleOpen}>
      <Carousel
        className={classes.carrusel}
        infiniteLoop={true}
        autoPlay
        interval={5000}
        showArrows={true}
        showThumbs={false}
        showStatus={false}
        transitionTime={750}
        showIndicators={true}
      >
        {slides.map(item => (
          <img className={classes.img} src={item} />
        ))}
      </Carousel>
      {text ? (
        <Typography noWrap className={classes.text} variant={"h4"}>
          {text}
        </Typography>
      ) : null}

      <Dialog
        onRequestClose={handleClose}
        className={classes.modal}
        open={openModal}
        onClose={handleClose}
        maxWidth={"xl"}
        fullWidth={true}
      >
        <DialogTitle>{text}</DialogTitle>
        <DialogContent>
          <ModalComponent slides={slides} />
        </DialogContent>
        <DialogActions className={classes.buttonContainer}>
          <Button
            className={`${classes.button} ${classes.buttonFirst}`}
            onClick={handleClose}
          >
            Cerrar
          </Button>
          <Button className={classes.button} onClick={handleClose}>
            <Link className={classes.link} to="#contact-form">
              Cotizar
            </Link>
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}