title: Antd popover opening in two diffrent widths depending on the order in which the actions are performed
body: <blockquote>
    <p>sorry if the title is confusing, I don't know how else to put it into words.</p>
  </blockquote>
  
  <p>I am currently learning react and made <a href="https://musing-gates-5c918f.netlify.com/" rel="nofollow noreferrer">this</a> application using <a href="https://ant.design/components/list/" rel="nofollow noreferrer">antd UI components</a>. I have this feature where I can add and remove items to the cart.</p>
  
  <p>i am using a popover to list the cart items once they are added to the cart. The popover opens in two different widths depending on the order in which i do actions in the application. </p>
  
  <p>if i open cart before adding any thing to the cart the cart opens in narrow container without any contents in the cart. and if i add anything to cart after that. then the cart stays narrow and doesnt fit everything properly.</p>
  
  <p><a href="https://i.stack.imgur.com/Td4OH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Td4OH.png" alt="enter image description here"></a></p>
  
  <p><em>now reload the page</em></p>
  
  <p>add items to the cart before opening the popover. now you can see the popover is wider and can fit all the contets properly.</p>
  
  <p><a href="https://i.stack.imgur.com/gWKob.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gWKob.png" alt="correct"></a></p>
  
  <p>How can i solve this issue ?</p>
  
  <p>reproducable example: <a href="https://codesandbox.io/s/github/nijeesh4all/reactShopping/tree/master/?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">Code Sandbox link</a></p>
  
  <p>github: <a href="https://github.com/nijeesh4all/reactShopping" rel="nofollow noreferrer">https://github.com/nijeesh4all/reactShopping</a></p>