title: Run CSSTransition inside TransitionGroup when any value changes
body: <p>I'm looking at the <a href="https://reactcommunity.org/react-transition-group/transition-group" rel="nofollow noreferrer">TransitionGroup documentation example</a>, and I'm trying to update it to run the CSSTransition whenever the <code>text</code> value is updated for an <em>existing</em> item.</p>
  <p>I have set up a <a href="https://codesandbox.io/s/elegant-kilby-ezjy03" rel="nofollow noreferrer">codesandbox</a> to show my current attempt.</p>
  <pre><code>const [items, setItems] = useState([
      { id: 1, text: 'Hello world!' },
      { id: 2, text: 'How are you?' },
  ]);
  
  return (
      &lt;Container style={{ marginTop: '2rem' }}&gt;
          &lt;ListGroup style={{ marginBottom: '1rem' }}&gt;
              &lt;TransitionGroup className=&quot;todo-list&quot;&gt;
                  {items.map(({ id, text }) =&gt; (
                      &lt;CSSTransition
                          key={id}
                          timeout={500}
                          classNames=&quot;item&quot;&gt;
                          &lt;ListGroup.Item&gt;{text}&lt;/ListGroup.Item&gt;
                      &lt;/CSSTransition&gt;
                  ))}
              &lt;/TransitionGroup&gt;
          &lt;/ListGroup&gt;
  
          &lt;Button
              onClick={() =&gt; {
                  setItems((items) =&gt; [
                      { id: 1, text: 'Hello to you!' },
                      { id: 2, text: 'How do you do?' },
                  ]);
              }}&gt;
          Update Items
          &lt;/Button&gt;
      &lt;/Container&gt;
  </code></pre>
  <p>);</p>
  <p>When I click the button, the text content updates without the CSSTransition. I know this is because of the <code>id</code> not changing, and this is what <code>key</code> is set to, but how do I have TransitionGroup take into account the <code>text</code> value?</p>
  <p>How do I keep the same <code>id</code> but update the text value with a transition?</p>