Modal: Flickering when size is set to Large or small

[da-moon]

I am expereincing an issue when I am using Modal Component with Meteor. For some reason,Modal would keep "flickering", unless the Modal size is set to full screen.

Steps

Here is the code :

import React, { Component } from 'react';
import { Card, Icon, Image , Item,Button, Divider, Header, Container, Modal} from 'semantic-ui-react'
export default class someComponent extends Component {
    constructor(props)
    {
      super(props);
      this.state= {
        items :[
          { 
              image: {size:'tiny',src:"https://semantic-ui.com/images/wireframe/image.png"}, header: "Project Falcome", description:this.renderComponents("description"),extra:this.renderComponents("button","id1")
          },
           { 
              image: {size:'tiny',src:"https://semantic-ui.com/images/wireframe/image.png"}, header: "Project Domino", description:this.renderComponents("description"),extra:this.renderComponents("button","id2")
          },
           { 
              image: {size:'tiny',src:"https://semantic-ui.com/images/wireframe/image.png"}, header: "Project Bengali tiger", description:this.renderComponents("description"),extra:this.renderComponents("button","id3")
          },
           { 
              image: {size:'tiny',src:"https://semantic-ui.com/images/wireframe/image.png"}, header: "Project Outback", description:this.renderComponents("description"),extra:this.renderComponents("button","id4")
          },
        ],
        open: false,
        dimmer:"blurring",
      };
       this.renderComponents = this.renderComponents.bind(this);
      this.showModal = this.showModal.bind(this);
      this.closeModal=this.closeModal.bind(this);
    }
    showModal(e,_id){
      e.preventDefault();
     this.setState({ open: true })
    }
    closeModal(){
     this.setState({ open: false })
    }
    
    renderComponents  (type,_id)
    {
      if( type === "description")
        return (<Image src='https://semantic-ui.com/images/wireframe/short-paragraph.png' />);
      if (type==="button")
          return (<div>
          <Divider/>
          <Button primary floated='left' onClick={(e)=>{this.showModal(e,_id)}}>
            Explore
            <Icon name='right chevron' />
          </Button></div>);
    }
    
        
    render()
    {
      return( <div>
          <Item.Group divided items = {this.state.items}/>
          <Modal size='large' dimmer={this.state.dimmer} open={this.state.open} oncloseModal={this.closeModal}>
                    <Modal.Header>Select a Photo</Modal.Header>
                      <Modal.Content image>
                        <Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/kristy.png' />
                        <Modal.Description>
                          <Header>Default Profile Image</Header>
                          <p>We have found the following gravatar image associated with your e-mail address.</p>
                          <p>Is it okay to use this photo?</p>
                        </Modal.Description>
                      </Modal.Content>
                    </Modal>
          </div>
      );
    }
}

Expected Result

I was expecting to get something like this :
https://react.semantic-ui.com/modules/modal#modal-example-size

Actual Result

Here is how it actually looks
https://apperture-damoona.c9users.io/artist-dashboard

Version

0.68.3