title: How to use useRef to change the style of a element?
body: <p>I want to use the <code>useRef</code> hook to change the style of a DOM element:</p>
  
  <pre><code>const Box = props =&gt; {
    const box = useRef(0);
  
    const onClick = () =&gt; {
      box.current.backgroundColor = "blue";
    };
  
    return (
      &lt;div&gt;
        &lt;div
          ref={box}
          style={{ width: "300px", height: "300px", backgroundColor: "red" }}
        /&gt;
        &lt;button onClick={onClick}&gt;Change color of box&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>However, if I click on the button the <code>backgroundColor</code> of the <code>box</code> doesn't change.</p>
  
  <p>I also created a <a href="https://codesandbox.io/embed/billowing-shadow-tt98l" rel="noreferrer">simple code snippet</a>, which illustrates my problem.</p>