Как отобразить мое модальное окно и всю информацию, содержащуюся внутри (в React)?

Мое приложение отображает двенадцать случайных людей, взятых с другого веб-сайта. Все работает нормально, за исключением моего модального компонента (он должен отображать больше информации о человеке, на которого вы нажали). По какой-то причине всякий раз, когда я пытаюсь отобразить его, я получаю эту ошибку «Modal.js: 9 Uncaught TypeError: Cannot read property 'medium' of undefined», и с ним появляется больше ошибок. Я печатаю props.modalInfo из модального компонента на консоль, и у него есть вся необходимая мне информация, но по некоторым причинам он показывает, что props.modalInfo не определен, когда я пытаюсь его отобразить. Я никогда не делал модальные окна в React (я новичок). Может ли кто-нибудь объяснить мне, как я могу отобразить свой Modal и успешно передать все данные? Заранее спасибо!

    handleClick(id) {
        this.setState((prevState) => {
            const modalInfoToPass = prevState.employeeList.filter(employee => 
               {
                if (`${employee.name.first} ${employee.name.last}` === id){
                    // get only and only one object that fulfils the 
                    // condition
                    return employee;
                }
            })
            return {
                displayModal: true,
                // update the modalInfo state
                modalInfo: modalInfoToPass

            }
        })  
    }
    render(){
        return (
            <div className='container'>
                <Header />
                <main>
                    {
                        this.state.loading ? <h2 className='load-page'>Loading...</h2> : 
                        this.state.employeeList.map(employee => 
                            <Employee key = {`${employee.name.title}
                             ${employee.name.last}`} 
                             employeeInfo = {employee}
                             **handleClick = {this.handleClick}**
                             />)
                    }
                </main>
                <Footer />
                **{this.state.displayModal && <Modal modalInfo = {this.state.modalInfo} />}**
            </div>
        );
    }

function Modal(props) {
    **console.info(props.modalInfo);**
    return (
        <div className='bg-modal'>
            <div className='modal-content'>
                <div className='modal-image'>
                    <img src = {props.modalInfo.picture.medium} alt = {`${props.modalInfo.name.title} ${props.modalInfo.name.first}`}/>
                </div>
                <div className='modal-info'>
                    <p className='name'>{props.modalInfo.name.first} {props.modalInfo.name.last}</p>
                    <p className='email'>{props.modalInfo.email}</p>
                    <p className='place'>{props.modalInfo.location.city}</p>
                </div>
                <hr />
                <div className='modal-more-info'>
                    <p className='number'>{props.modalInfo.cell}</p>
                    <p className='address'>{`${props.modalInfo.location.street}, ${props.modalInfo.location.state}`}</p>
                    <p className='postcode'>{props.modalInfo.location.postcode}</p>
                    <p className='birthday'>{props.modalInfo.dob.date}</p>
                </div>
            </div>
        </div>
    );
}