When i preview images and then i delete one of them, value stays same

 const filesRef = useRef(null);

redux stuff

const initialState = {
    images: [],
};

const productsSlice = createSlice({
  name: "products",
  initialState,
  reducers: {
    deleteImg: (state, action) => {
      const payload = action.payload;
      state.productFields.images = payload;
    },
  },
});

   <input
          type="file"
          accept="image/*"
          alt="upload image"
          className="product-images-input"
          name="image"
          onChange={e => {
            handleAddImages({ target: e.target });
          }}
          onClick={e => {
            console.log(e.target.value);
            e.target.value = null;
          }}
          multiple
          hidden
          ref={filesRef}
        />

Formally, i can delete image but value stays same, even image is deleted i still can upload to cloud. if i use filesRef.current.value = null in handleDeleteImg function it works if i have one image, but if i have multiple image preview and i delete one, value will be null.

const handleDeleteImg = i => {
    const newImages = images.filter((_, index) => index !== i);
    dispatch(deleteImg(newImages));
  };

     {images.length > 0 && (
        <div className="uploaded-img-container">
          {images.map(({ url, name }, index) => {
            return (
              <article className="img-content" key={index}>
                <img
                  src={url}
                  alt={name || "default name"}
                  key={index}
                  className="uploaded-img"
                  title={name || "default name"}
                />
                <TiDelete
                  className="delete-img"
                  onClick={() => handleDeleteImg(index)}
                />
              </article>
            );
          })}
        </div>
      )}