title: How to animate change of grid item size Material UI
body: <p>I have a project with React and Material UI.</p>
  
  <p>I need some guidance on how to animate a grid item size change. The item is by default sm={3}, when the user hovers the item, this changes to sm={6}. This is done with even triggers and a state variable. My question is how can I create a transition/animation for this?</p>
  
  <p>I tried adding this to the item css but it didn't work.</p>
  
  <pre><code>transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.easeIn,
      duration: theme.transitions.duration.sta
  })
  </code></pre>