react hooks 轮播图

import "./index.css";
import { useRef } from "react";
const Demo1 = () => {
  const imgConRef = useRef();
  const containerRef = useRef();
  const changeImg = (index) => {
    const conWidth=containerRef.current.clientWidth;
    imgConRef.current.style.transform = `translateX(
      -${index * conWidth}px)`;
  };
  return (
    <div className="box" ref={containerRef}>
      <div className="see-con" ref={imgConRef}>
        <div
          style={{ backgroundColor: "greenyellow" }}
          className="colorbox"
        >
          1
        </div>
        <div
          style={{ backgroundColor: "#f67" }}
          className="colorbox"
        >
          2
        </div>
        <div
          style={{ backgroundColor: "#f986" }}
          className="colorbox"
        >
          3
        </div>
        <div
          style={{ backgroundColor: "#f23347" }}
          className="colorbox"
        >
          4
        </div>
      </div>
      <ul>
        <li onClick={() => changeImg(0)}>1</li>
        <li onClick={() => changeImg(1)}>2</li>
        <li onClick={() => changeImg(2)}>3</li>
        <li onClick={() => changeImg(3)}>4</li>
      </ul>
    </div>
  );
};
export default Demo1;

.box{
    margin: 0;
    padding: 0 0;
    box-sizing: border-box;
    width: 100%;
    height: 400px;
    background-color: aquamarine;
    overflow: hidden;
}

.see-con{
    width: 400%;
    height: 300px;
    background-color: bisque;
    border-radius: 2px solid black;
    transition: transform 0.5s ease-in-out;
}
.colorbox{
    width: 25%;
    height: 300px;
    float: left;
}