react，实现鼠标点击效果，即鼠标左键按下点击图标后将背景色变为灰色，鼠标左键松开后将背景色变回原来的白色，浏览器没有报错，但也没有实现想要的效果，原因是什么？

在用的react版本如下：

react，使用ant mobile 使用Grid栅格组件，部分代码如下：

import React, { useRef } from 'react';
import { Grid } from 'antd-mobile';
import './style.css';
export default () => {
  // 获取元素节点
  let color = useRef();
  // 触发点击事件改变样式
  function mousedown() {
    color.current.style.backgroundColor = 'gray';
    console.log(111);
  }
  function mouseup() {
    color.current.style.backgroundColor = 'white';
    console.log(222);
  }
  return (
        <div className='grid'>
        <Grid columns={2} gap={4}>
          <Grid.Item>
            <div className='grid-demo-item-block' ref={color} onMouseDown={() => { mousedown() }} onMouseUp={() => {mouseup() }}>
              <p>家住琶洲p>
              <span>前景可期span>
              <img src={require(`./1.jpg`)} alt='' />
            div>
          Grid.Item>

chrome浏览器没有报错，审查过元素，看到样式已加上，尝试过另外起一个新的类名，也试过调整样式的优先级为 !important，同时也没有实现想要的效果，如下图：

鼠标左键按下后不抬起时，console不出内容，且看不到背景色变成灰色；鼠标左键抬起后，几乎同时console出内容111和222，且背景色依然保持白色，请问代码哪里出了问题？

function V() {
    // 获取元素节点
    let color = useRef();
    // 触发点击事件改变样式
    function mousedown() {
        color.current.style.backgroundColor = 'gray';
        console.log(111);
    }
    function mouseup() {
        color.current.style.backgroundColor = 'white';
        console.log(222);
    }
    return (
        <div className='grid'>
            <Grid columns={2} gap={4}>
                <Grid.Item>
                    <div className='grid-demo-item-block' ref={color} onMouseDown={() => { mousedown() }} onMouseUp={() => { mouseup() }}>
                        <p>家住琶洲</p>
                        <span>前景可期</span>
                        <img src={require(`./1.jpg`)} alt='' />
                    </div>
                </Grid.Item>
            </Grid>
        </div>
    )

}

我这么写 效果出来了 。我没 ./style.css