如何解决 React Bootstrap 模态框无法正确显示关闭动画的问题？

Question

我按照 ChatGPT 的描述，在 React Bootstrap 模态框的基础上以 hook 的形式封装了一个消息框组件，代码如下：

import React from "react";
import { useState, createContext, useRef } from "react";
import { Button, Modal } from "react-bootstrap";

function useMessageBox() {
    let [title, setTitle] = useState('');
    let [message, setMessage] = useState('');
    let [buttons, setButtons] = useState(null);

    let [showDialog, setShowDialog] = useState(false);
    let resolveRef = useRef(null);

    const handleResult = (result) => {
        console.log(result);
        resolveRef.current(result);
        setShowDialog(false);
    };

    const MessageBox = () => {
        return (
            <div>
                <Modal show={showDialog}>
                    <Modal.Header>
                        <Modal.Title>{title}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>{message}</Modal.Body>
                    <Modal.Footer>
                        {buttons}
                    </Modal.Footer>
                </Modal>
            </div>
        );
    };

    const show = (title, message, type) => {
        setTitle(title);
        setMessage(message);
        if (type === 'ok') {
            setButtons(
                <Button variant="primary" onClick={ () => handleResult('ok') }>确定</Button>
            );
        }
        else if (type === 'yesno') {
            setButtons(
                <>
                    <Button variant="secondary" onClick={ () => handleResult('confirm') }>取消</Button>
                    <Button variant="primary" onClick={ () => handleResult('cancel') }>确定</Button>
                </>
            )
        }

        setShowDialog(true);

        return new Promise((resolve, reject) => {
            resolveRef.current = resolve;
        });
    };

    return [MessageBox, show];
}

export default useMessageBox;

调用：

function App() {
  const [MessageBox, show] = useMessageBox();

  return (
    <div>
      <h1>123</h1>
      <Button onClick={() => show("标题", "123", "yesno")}>显示</Button>
      <Button onClick={() => show("标题", "456", "ok")}>显示2</Button>
      <MessageBox />
    </div>
  );
}

目前的问题是关闭对话框的时候没有动画，这个怎么解决？
CodeSandbox 链接

Answer 1

MessageBox_Hook.js:

const MessageBox = useMemo(() => {
  return (
    <div>
      <Modal show={showDialog}>
        <Modal.Header>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{message}</Modal.Body>
        <Modal.Footer>{buttons}</Modal.Footer>
      </Modal>
    </div>
  );
});

App.js

return (
  <div>
    <h1>123</h1>
    <Button onClick={() => show("标题", "123", "yesno")}>显示</Button>
    <Button onClick={() => show("标题", "456", "ok")}>显示2</Button>
    {MessageBox}
  </div>
);