Javascript react socks无法通过我的图标立即工作

我的自适应标题在1个按钮中伸缩，图标在另一个位置重新加载。但若您只是挤压到断点，那个么在单击之前它将不起作用。我试图通过引导css中的

@media

来实现这一点，但我的覆盖层被破坏了

//其他代码

                           <Breakpoint customQuery="(max-width: 766px)">
                            <OverlayTrigger  show={this.isDisabled()} trigger="click" placement="bottom" overlay={popover} className = 'AuthIcon' >
                                <BsPersonFill className='HeadIcon' id = 'personButton' variant="success" cursor = "pointer" onClick={this.Flip}/>
                            </OverlayTrigger>
                            <AiOutlineShoppingCart  className='mr-1 HeadIcon' id = 'personButton' variant="success" cursor = "pointer" onClick={this.handleCartClick}/>
                           </Breakpoint>         
                        //Other code
                            <Breakpoint customQuery="(min-width: 765px)">
                                <OverlayTrigger  show={this.isDisabled()} trigger="click" placement="bottom" overlay={popover} className = 'AuthIcon' >
                                    <BsPersonFill className='HeadIcon' id = 'personButton' variant="success" cursor = "pointer" onClick={this.Flip}/>
                                </OverlayTrigger>
                            <AiOutlineShoppingCart className='HeadIcon'  id = 'personButton' variant="success" cursor = "pointer" onClick={this.handleCartClick}/>
                            </Breakpoint>