Applying style distorts React Callout component

Question

I have a react application with the Callout component that looks perfectly normal if I don't apply any styles to it. Its pointer perfectly points to a filter button

However, when I try to hide it (apply display:none to it) and un-hide it, the callout comes back distorted with a pointer torn out

Can somebody please suggest how fix that distortion?

Thank you very much in advance!

            <SearchBox placeholder="Search for an Event" styles={searchBoxStyles}
                        onSearch={newValue => console.log('value is ' + newValue)} 
                        className="searchBoxWithButton" />
                    <div className={contentStyles.buttonArea}>
                       <IconButton iconProps={filterIcon} className="eventsFilterButton"
                           onClick={this.ChangeLS}/>
                    </div>

                    <div className="hidden">
                        <Callout 
                        ariaLabelledBy={labelId}
                        ariaDescribedBy={descriptionId}
                        role="alertdialog"
                        gapSpace={0}
                        target={`.eventsFilterButton`}
                        onDismiss={this.ChangeLS}
                        id="mycallout"
                        setInitialFocus
                        className="hidden"
                        >
                        <table className="smallfont">
                        <tr>
                        <td className="left">
                            <div className="bold">Date Rannge</div>
                        </td>
                        <td>
                        </td>
                        </tr>
                        <tr>
                        <td>
                        <DatePicker
                                className={contentStyles.control}
                                firstDayOfWeek={DayOfWeek.Sunday}
                                strings={DayPickerStrings}
                                disableAutoFocus={true}
                                placeholder="Select a date..."
                                ariaLabel="Select a date"
                            />
                        </td>
                        <td>
                        <DatePicker
                                className={contentStyles.control}
                                firstDayOfWeek={DayOfWeek.Sunday}
                                strings={DayPickerStrings}
                                disableAutoFocus={true}
                                placeholder="Select a date..."
                                ariaLabel="Select a date"
                            />                      
                        </td>              
                        </tr>
                        <tr>
                            <td className="left"><div className="bold">Event Type</div></td>
                            <td className="left"><div className="bold">Event Subtype</div></td>
                        </tr>
                        <tr>
                            <td><Checkbox label="Event type option" defaultChecked className="smallfont"/></td>
                            <td><Checkbox label="Event type option" className="smallfont"/></td>
                        </tr>
                        <tr>
                            <td><Checkbox label="Event type option" className="smallfont"/></td>
                            <td><Checkbox label="Event type option" defaultChecked className="smallfont"/></td>
                        </tr> 
                        <tr><td></td><td></td></tr>                 
                        <tr>
                            <td className="left"><div className="bold">Event Status</div></td>
                            <td></td>
                        </tr>                
                        <tr>
                            <td><Checkbox label="Draft" className="smallfont"/></td>
                            <td><Checkbox label="Rejected" className="smallfont"/></td>
                        </tr> 
                        <tr>
                            <td><Checkbox label="Submitted for approval" className="smallfont"/></td>
                            <td><Checkbox label="Canceled"  className="smallfont"/></td>
                        </tr>
                        <tr>
                            <td><Checkbox label="Resumed for revision" className="smallfont"/></td>
                            <td><Checkbox label="Closed" defaultChecked className="smallfont"/></td>
                        </tr>
                        <tr>
                            <td><Checkbox label="Approved" className="smallfont"/></td>
                            <td></td>
                        </tr>                                                         
                        </table>
                        </Callout>
                </div>

Where hidden style is simplet display:none