Модальное окно не отображается

Question

В моих столбцах я хочу, чтобы кнопка повторялась для каждой строки в определенном столбце, поэтому я написал этот код для своего столбца «Фото» в таблице реакции bootstrap. Однако, когда я нажимаю кнопку, мое модальное окно делает не отображаются, несмотря на привязку isVisible к эквиваленту componentDidUpdate в функциональном компоненте. Однако isVisible обновляется до true. Что я здесь делаю не так?

Вот некоторая справочная информация о isVisible, displayModal и hideModal, которая находится в моем компоненте DefectPhotoModal:

    const [isVisible, setIsVisible] = useState(false);
    const displayModal = () => {
        setIsVisible(true);
    }
    const hideModal = () => {
        setIsVisible(false);
    }

и код в реакции bootstrap столбец таблицы:

dataField: 'Photos',
            text: 'Photos',
            sort: true,
            formatter: (cell, row, rowIndex) => {

                return (
                    <>
                        {isVisible && <DefectPhotoModal
                            children={({ isVisible, displayModal, hideModal }) => (
                                <>
                                </>
                            )}
                            show={isVisible}
                            onHide={hideModal}
                            id={row.reportId}
                        />}
                        <Button variant="btn btn-success text-white"
                            onClick={displayModal}>
                            View
                        </Button>
                    </>
                );