如何使用react js中的jquery在onclick函数后填充图标颜色

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [iconColor, setIconColor] = useState(''); // 定义图标颜色的状态变量

  useEffect(() => {
    // 监听点击事件
    $('body').on('click', '.icon', function() {
      $(this).css('color', iconColor); // 修改图标颜色
    });
  }, [iconColor]);

  return (
    <div>
      <button onClick={() => setIconColor('red')}>红色</button>
      <button onClick={() => setIconColor('blue')}>蓝色</button>
      <button onClick={() => setIconColor('green')}>绿色</button>
      <i className="icon">图标</i>
    </div>
  );
};

export default MyComponent;