Using React to reset the size of a div with CSS resize enabled

Question

Currently I have a resizable div using resize: both; in its CSS. I'd like to make a function to reset the div back to its initial percentage-based size. I got the following code to work by hard-coding the default sizes. How can I make this more adaptable by setting the default sizes only in the CSS and not in the javascript? codepen

CSS:

.resizable-div {
  resize: both;
  overflow: auto;
}

React JS:

const root = ReactDOM.createRoot(document.getElementById('root'));

const ResizableDiv = () => {
  const defaultWidth="50%";
  const defaultHeight="60px";
  
  const divRef = React.useRef();
  const resetSize = () => {
    divRef.current.setAttribute("style",`width:${defaultWidth};height:${defaultHeight}`)
  }
  return (
    <>
      <div ref={divRef} className={`resizable-div`}>
        Test Div
      </div>
      <button onClick={resetSize}>Reset</button>
    </>
  );
}

root.render(<ResizableDiv />);