const slider = useRef();
  let tx = 0;

  const slideForward = () => {
    if (tx > -400) {
      tx -= 100;
    }
    slider.current.style.transform = `translateX(`${tx}%`)`;
  };
  const slideBackward = () => {};

  return (
    <div className="Customers">
      <img src={nextIcon} alt="" className="nextIcon" onClick={slideForward} />
      <img src={nextIcon} className="backIcon" alt="" onClick={slideBackward} />

      {customerData.map((record) => (
        <div key={record.id} className="slider">
          <ul ref={slider}>
            <li>
              <img src={record.logo} alt={`${record.company}-Logo`} />
            </li>
          </ul>
        </div>
      ))}
    </div>
  );
};

export default Customers;

Why the slider doesn’t move and somehow when I click the button next shows only last picture?

I want the slider to move 100% each time I press the next button