Модал не отображается при неправильной загрузке файла

Question

У меня есть компонент загрузки файла, который проверяет определенный тип файла (видео / *), если какой-либо другой файл загружен, ему нужно показать модальное сообщение с некоторым сообщением.

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

FileUpload Component

import React, {Component} from 'react';
import ModalMessage from './ModalMessage';
const mimeType = 'src/mimeTypes.json';

class FileUpload extends Component {
    constructor(props){
        super(props);
        this.getFileInfo = this.getFileInfo.bind(this);
        this.checkFileType = this.checkFileType.bind(this);
        this.state = {
            fileCheck: false,
            incorrectFiles: []
        };
    }

    checkFileType(files){
        for(let i in files){
            if(!mimeType.hasOwnProperty(files[i]['type'])){
                this.setState({
                    fileCheck: true
                });
                this.state.incorrectFiles.push(files[i]);
            }
        }
    }

    getFileInfo(evnt) {
        let uploadEle = document.getElementById('uploadFile');
        this.checkFileType(uploadEle.files);
        console.log(uploadEle.files);
        for(let i = 0; i < uploadEle.files.length; i++){
            let reader = new FileReader();
            reader.onloadend = function(evnt){
                console.log(i);
                console.log(evnt.target.result);
            };

            reader.readAsArrayBuffer(uploadEle.files[i]);
        }
    }
    render() {
        return (
            <div>
                <label className="btn btn-primary">
                    File Upload <input type="file" id='uploadFile' onChange={this.getFileInfo} style={{display:"none"}} multiple/>
                </label>
                {this.state.fileCheck ? <ModalMessage/> : null}
            </div>
        );
    }
}

Модальный компонент

import React, {Component} from 'react';

class ModalMessage extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
                            ...
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}