AntDesign. change twoToneColor on an event

How can i change twoToneColor of AntDesign Icon when the trigger onMouseEnterEvent

import React from 'react';
import {DeleteTwoTone, WarningTwoTone, EditTwoTone} from '@ant-design/icons';

const iconStyle = {fontSize: '18px'};
const defaultColor = '#d9d9d9';


export const Control = ({className, onClick}) => {
  let warnColor = defaultColor;
  let deleteColor = defaultColor;

  // does not work
  const onHover = (target) => {
    switch (target) {
      case 'warn':
        warnColor = '#ffe58f';
        return;
      case 'delete':
        deleteColor = '#ff4d4f';
        return;
    }
  };

  return (
    <div className={className}>
      <WarningTwoTone
        twoToneColor={warnColor}
        style={iconStyle}
        onMouseEnter={() => onHover('warn')}
      />
      <EditTwoTone
        twoToneColor="#d9d9d9"
        style={iconStyle}
      />
      <DeleteTwoTone
        twoToneColor={deleteColor}
        style={iconStyle}
        onMouseEnter={() => onHover('delete')}
      />
    </div>
  )
};

Answer

I decided with the help of hooks

import React from 'react';
import {DeleteTwoTone, WarningTwoTone, EditTwoTone} from '@ant-design/icons';

const iconStyle = {fontSize: '18px'};

const activeColors= {
  warn: '#ff9d52',
  delete: '#ff4d4f',
  edit: '#709cd9'
};

const defaultColors = {
  warn: '#d9d9d9',
  delete: '#d9d9d9',
  edit: '#d9d9d9'
};

export const Control = ({className, onClick}) => {

  const [colors, setColors] = React.useState(defaultColors);

  const mouseLeaveHandler = () => {
    setColors(defaultColors)
  };

  const mouseEnterHandler = (field) => {
    setColors(prev => {
      return {
        ...prev,
        [field]: activeColors[field]
      }
    })
  };

  return (
    <div className={className}>
      <WarningTwoTone
        twoToneColor={colors.warn}
        style={iconStyle}
        onMouseEnter={() => mouseEnterHandler('warn')}
        onMouseLeave={mouseLeaveHandler}
      />
      <EditTwoTone
        twoToneColor={colors.edit}
        onMouseEnter={() => mouseEnterHandler('edit')}
        onMouseLeave={mouseLeaveHandler}
        style={iconStyle}
      />
      <DeleteTwoTone
        twoToneColor={colors.delete}
        style={iconStyle}
        onMouseEnter={() => mouseEnterHandler('delete')}
        onMouseLeave={mouseLeaveHandler}
      />
    </div>
  )
};