使用useRef获取活动背景色

给定css

.App {
  font-family: sans-serif;
  text-align: center;
}
.App:hover {
  background-color: red;
}

和jsx代码

import "./styles.css";
import { useRef } from "react";

export default function App() {
  const r = useRef();
  const handleClick = () => {
    console.log(r.current.style.backgroundColor);
  };
  return (
    <div className="App" ref={r} onClick={handleClick}>
      something
    </div>
  );
}

看见 codesandbox 我想得到div的活动背景色(红色)。但密码什么也没给我。正确的方法是什么?