Problem with React-Redux

Hi there,

Im new here and trying to get my head around Redux. I have completed as far as the Redux toolkit section of the course, and so now just wanted to test my knowledge a bit on a practice project on Replit.

However of gotten stuck on a very intermittent problem. Im trying to pass the ID of a button to a reducer, but it is only working half the time. With a series of console logs, I managed to see that its happening in the handleClick function. Sometimes the ID comes though, other times it is blank. (This despite seeing that the HTML element has the correct ID. )I cant figure out why it would works sometimes, but not others.

import {HiArrowUp, HiArrowDown} from 'react-icons/hi';
import { useDispatch, useSelector } from 'react-redux';
import { selectTimers, incrementTimer } from '../features/timersSlice.jsx';

const TimerSetting = () => {
  const timers = useSelector(selectTimers);
  const dispatch = useDispatch();
  
  const handleClick = (e) => {
    console.log(e.target.id); // Console shows blank sometimes, and other times the ID shows up.
    dispatch(incrementTimer({ timer: e.target.id }))
  };
  
  return (
    <div className="container">
      {timers.map(timer => (
      <div className="setting" key={timer.name}>
        <h3>{timer.name}</h3>
        <div id="time" className="container">
          <button onClick={handleClick} id={timer.name}><HiArrowUp/></button>
          <h5 >{timer.time}</h5>
          <HiArrowDown />
        </div>
      </div>
      )
    )}
    </div>
  )
} 

export default TimerSetting

I must be missing something basic - but cant think what. Any ideas?