I encountered a problem when trying to use useRef react hook to add cssText in Typescript. I have tested the code in Javascript and it works perfectly fine but unable to make it work in Typescript. My code is as below. The code will change the background color of a div when I click the button.

import {useRef} from 'react';

function App() {
  const divRef = useRef<HTMLDivElement>(null)
  const handleClick = () => {
    divRef.current && divRef.current.style.cssText += "background-color: blue";
  }

  return (
    <div className="App" ref={divRef}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

I got the following error message:

ERROR in src/App.tsx
  Line 6:51:  Parsing error: ';' expected

webpack compiled with 2 errors
ERROR in src/App.tsx:6:52
TS1005: ';' expected.
    4 |   const divRef = useRef<HTMLDivElement>(null);
    5 |   const handleClick = () => {
  > 6 |     divRef.current && divRef.current.style.cssText += "background-color: blue";
      |                                                    ^^
    7 |   };
    8 |
    9 |   return (

Screenshot of the error

My dependencies are as below:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.0",
    "@types/node": "^16.11.33",
    "@types/react": "^18.0.8",
    "@types/react-dom": "^18.0.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.6.4",
    "web-vitals": "^2.1.4"
  },

Appreciate if anyone can share any insight into this issue.