Не происходит отрисовка компоненты через React.createportal

Почему не происходит отрисовка компоненты при клике на элемент?

Ошибок никаких нет, но и результата тоже.

let [showAllBooks, setShowAllBooks] = useState(false);

    function renderAllBooks() {
        let p = new Promise((resolve, reject) => {
            setShowAllBooks(true);
            resolve(!showAllBooks);
        })
        p.then((modalBooks) => {
            if (modalBooks === true) {
                return ReactDOM.createPortal(<AllBooks/>, document.getElementById('root'))
            }
        })
    }


    return (
        <div className={props.modalBook ? s.activeModal : s.modalBooks}>
            <div className={s.activeModal__title}>
                <h4>Best books</h4>
                {
                    props.state['booksItem'].length > 15 ?
                        <img src={grid} alt="" onClick={renderAllBooks}/> : <span/>
                }
            </div>
            <div
                className={s.activeModal__wrapper}
                ref={ref}
                onMouseDown={onMouseDown}
                onMouseUp={onMouseUp}
                onMouseMove={onMouseMove}
            >
                {props.state['booksItem'].map((item, index) => {
                    return (<div className={s.book} key={index}>
                        <img src={book} alt=""/>
                        <p>{item}</p>
                    </div>);
                })}
            </div>
        </div>
    );