title: React CSSTransitionGroup - Unexpected Ref Object provided for div
body: <p>so I have recently started learning React.</p>
  <p>My goal is, to have a container with newest messages,...</p>
  <p>Whenever there is a new message, by clicking on it, the message should dissapear, and the containers height should shrink.</p>
  <p>I've tried CSSTransitionGroups, but I still get the following errors:</p>
  <pre><code>[Error] Warning: Unexpected ref object provided for div. Use either a ref-setter function or React.createRef().
     in div (at App.js:52)
     in MessagesContainer (at App.js:32)
     in div (at App.js:21)
     in App (at src/index.js:8)
     in StrictMode (at src/index.js:7)
     printWarning (0.chunk.js:26512)
     error (0.chunk.js:26484)
     commitAttachRef (0.chunk.js:46321)
     commitLayoutEffects (0.chunk.js:49087)
     callCallback (0.chunk.js:26612)
     dispatchEvent
     invokeGuardedCallbackDev (0.chunk.js:26661)
     invokeGuardedCallback (0.chunk.js:26714)
     commitRootImpl (0.chunk.js:48824)
     commitRootImpl
     unstable_runWithPriority (0.chunk.js:59056)
     commitRoot (0.chunk.js:48666)
     finishSyncRender (0.chunk.js:48083)
     performSyncWorkOnRoot (0.chunk.js:48069)
     scheduleUpdateOnFiber (0.chunk.js:47465)
     updateContainer (0.chunk.js:50614)
     (anonymous function) (0.chunk.js:50997)
     unbatchedUpdates (0.chunk.js:48183)
     legacyRenderSubtreeIntoContainer (0.chunk.js:50996)
     ./src/index.js (main.chunk.js:1405)
     __webpack_require__ (bundle.js:785)
     fn (bundle.js:151)
     (anonymous function) (main.chunk.js:1432)
     __webpack_require__ (bundle.js:785)
     checkDeferredModules (bundle.js:46)
     webpackJsonpCallback (bundle.js:33)
     Global Code (main.chunk.js:1)
  [Error] Warning: Unexpected ref object provided for div. Use either a ref-setter function or React.createRef().
     in div (at App.js:52)
     in MessagesContainer (at App.js:32)
     in div (at App.js:21)
     in App (at src/index.js:8)
     in StrictMode (at src/index.js:7)
     printWarning (0.chunk.js:26512)
     error (0.chunk.js:26484)
     commitAttachRef (0.chunk.js:46321)
     commitLayoutEffects (0.chunk.js:49087)
     callCallback (0.chunk.js:26612)
     dispatchEvent
     invokeGuardedCallbackDev (0.chunk.js:26661)
     invokeGuardedCallback (0.chunk.js:26714)
     commitRootImpl (0.chunk.js:48824)
     commitRootImpl
     unstable_runWithPriority (0.chunk.js:59056)
     commitRoot (0.chunk.js:48666)
     finishSyncRender (0.chunk.js:48083)
     performSyncWorkOnRoot (0.chunk.js:48069)
     performSyncWorkOnRoot
     (anonymous function) (0.chunk.js:37553)
     unstable_runWithPriority (0.chunk.js:59056)
     flushSyncCallbackQueueImpl (0.chunk.js:37548)
     flushSyncCallbackQueue (0.chunk.js:37536)
     flushPassiveEffectsImpl (0.chunk.js:49158)
     unstable_runWithPriority (0.chunk.js:59056)
     (anonymous function) (0.chunk.js:48978)
     workLoop (0.chunk.js:59000)
     flushWork (0.chunk.js:58956)
     performWorkUntilDeadline (0.chunk.js:58560)
  [Error] Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:
     in div (created by Message)
     in Message (at App.js:81)
     in Transition (created by CSSTransition)
     in CSSTransition (at App.js:74)
     in DismissableMessage (at App.js:61)
     in div (at App.js:52)
     in MessagesContainer (at App.js:32)
     in div (at App.js:21)
     in App (at src/index.js:8)
     in StrictMode (at src/index.js:7)
     printWarning (0.chunk.js:26512)
     error (0.chunk.js:26484)
     findHostInstanceWithWarning (0.chunk.js:50552)
     performExit (0.chunk.js:55172:115)
     updateStatus (0.chunk.js:55119)
     componentDidUpdate (0.chunk.js:55081)
     commitLifeCycles (0.chunk.js:46130)
     commitLayoutEffects (0.chunk.js:49082)
     callCallback (0.chunk.js:26612)
     dispatchEvent
     invokeGuardedCallbackDev (0.chunk.js:26661)
     invokeGuardedCallback (0.chunk.js:26714)
     commitRootImpl (0.chunk.js:48824)
     commitRootImpl
     unstable_runWithPriority (0.chunk.js:59056)
     commitRoot (0.chunk.js:48666)
     finishSyncRender (0.chunk.js:48083)
     performSyncWorkOnRoot (0.chunk.js:48069)
     performSyncWorkOnRoot
     (anonymous function) (0.chunk.js:37553)
     unstable_runWithPriority (0.chunk.js:59056)
     flushSyncCallbackQueueImpl (0.chunk.js:37548)
     flushSyncCallbackQueue (0.chunk.js:37536)
     discreteUpdates$1 (0.chunk.js:48172)
     discreteUpdates (0.chunk.js:27234)
     dispatchDiscreteEvent (0.chunk.js:30633)
     dispatchDiscreteEvent
  [Error] Warning: Unexpected ref object provided for div. Use either a ref-setter function or React.createRef().
     in div (at App.js:52)
     in MessagesContainer (at App.js:32)
     in div (at App.js:21)
     in App (at src/index.js:8)
     in StrictMode (at src/index.js:7)
     printWarning (0.chunk.js:26512)
     error (0.chunk.js:26484)
     commitAttachRef (0.chunk.js:46321)
     commitLayoutEffects (0.chunk.js:49087)
     callCallback (0.chunk.js:26612)
     dispatchEvent
     invokeGuardedCallbackDev (0.chunk.js:26661)
     invokeGuardedCallback (0.chunk.js:26714)
     commitRootImpl (0.chunk.js:48824)
     commitRootImpl
     unstable_runWithPriority (0.chunk.js:59056)
     commitRoot (0.chunk.js:48666)
     finishSyncRender (0.chunk.js:48083)
     performSyncWorkOnRoot (0.chunk.js:48069)
     performSyncWorkOnRoot
     (anonymous function) (0.chunk.js:37553)
     unstable_runWithPriority (0.chunk.js:59056)
     flushSyncCallbackQueueImpl (0.chunk.js:37548)
     flushSyncCallbackQueue (0.chunk.js:37536)
     discreteUpdates$1 (0.chunk.js:48172)
     discreteUpdates (0.chunk.js:27234)
     dispatchDiscreteEvent (0.chunk.js:30633)
     dispatchDiscreteEvent
  
  </code></pre>
  <p>So my code looks like this:
  In the App Component, I am calling</p>
  <pre><code>&lt;MessagesContainer&gt;&lt;/MessagesContainer&gt;
  </code></pre>
  <pre><code>function MessagesContainer() {
    const [menuHeight, setMenuHeight] = useState(null);
    const dropdownRef = React.createRef();
  
    useEffect(() =&gt; {
      setMenuHeight(dropdownRef.current?.firstChild.offsetHeight);
    }, []);
  
    function calcHeight(el) {
      const height = el.offsetHeight;
      setMenuHeight(height);
    }
  
    return (
      &lt;div style={{ height: menuHeight }} ref={{dropdownRef}} className=&quot;messages-container&quot;&gt;
        &lt;DismissableMessage
          header=&quot;Welcome back!&quot;
          content=&quot;This is a special notification which you can`t dismiss.&quot;
        &gt;&lt;/DismissableMessage&gt;
        &lt;DismissableMessage
          header=&quot;Welcome back!&quot;
          content=&quot;This is a special notification which you can`t dismiss.&quot;
        &gt;&lt;/DismissableMessage&gt;
        &lt;DismissableMessage
          header=&quot;Welcome back!&quot;
          content=&quot;This is a special notification which you can`t dismiss.&quot;
        &gt;&lt;/DismissableMessage&gt;
      &lt;/div&gt;
    );
  
    function DismissableMessage(props) {
      const [visible, dismissMessage] = useState(true);
  
      
  
      return (
        &lt;CSSTransition
          in={visible}
          unmountOnExit
          timeout={500}
          className=&quot;message-dismiss&quot;
          onExit={calcHeight}
        &gt;
          &lt;Message
            onClick={() =&gt; dismissMessage(!visible)}
            header={props.header}
            content={props.content}
          /&gt;
        &lt;/CSSTransition&gt;
      );
    }
  }
  </code></pre>
  <p>Please tell me if you need anything, thanks in advance.</p>