reactjs - shouldComponentUpdate 新旧の props を同じに反応させる

Question

私のコードには、親から小道具を受け取る1つの子コンポーネントがあり、その配列をマッピングして名前をレンダリングし、画像ボタンとレンダリング画像用の1つの子の子コンポーネントを追加します(これは画像の再レンダリングを避けるためです)。

画像の子の子の再レンダリングを追加すると正常に動作しますが、子の子の削除ボタンを使用して画像を削除すると、画像は親の状態から削除されますが、shouldComponentUpdate の古い小道具と新しい小道具が同じであるため、子の子は再レンダリングされません。

なぜこれが起こっているのか誰にも示唆できますか？

ChildComponent

import { TextField } from "@material-ui/core";
import React, { Component } from "react";

export default class ShowData extends Component {
  shouldComponentUpdate(newProps) {
    return !(this.props.data === newProps.data);
  }
  render() {
    const data = this.props.data; //this get data in array like [{name: "test", images: [..images]},{name: "test2", images: [..images]}]
    const update = this.props.update; //this will receive parent function for update state parameters (target, index, value,img-removeIndex)
    return (
      <div>
        {data.map((user, key) => {
          return (
            <>
              <TextField
                fullWidth
                id="outlined-basic"
                onChange={(e) => this.props.update("NAME", key, e.target.value)}
                value={user.name}
                variant="outlined"
              />
              <UserImages
                images={user.images}
                index={key}
                remove={this.props.update}
              />{" "}
              //child component
              <input
                type="file"
                onChange={(e) =>
                  this.props.update("ADD_IMG", key, e.target.files)
                }
              />
            </>
          );
        })}
      </div>
    );
  }
}

子の子コンポーネント

import React, { Component } from "react";

export default class UserImages extends Component {
  shouldComponentUpdate(newProps) {
    return !(this.props.images === newProps.images);
  }
  render() {
    const remove = this.props.remove;
    return (
      <div>
        {this.props.images.map((img, key) => {
          return (
            <>
              <img src={img} />
              <button
                onClick={() => remove("REMOVE_IMG", this.props.index, "", key)}>Remove
              </button>
            </>
          );
        })}
      </div>
    );
  }
}

新しいプロップと古いプロップをコンソールすると、新しいプロップと古いプロップが同じになるのはなぜですか。イメージは削除されますが、古いプロップと新しいプロップの値は新しく更新されたイメージの状態値です。そのため、再レンダリングされませんが、削除された画像は引き続き表示されます