Reactで子テーブルのデータ削除後、反映された子テーブルを描画したい。

Question

前提・実現したいこと

親コンポーネントで子テーブルの指定行のデータを削除した後に
削除が反映された子テーブルを描画したい。

発生している問題・エラーメッセージ

現状はエラーメッセージ等は無く、テーブル削除の処理を行っても子テーブルに反映されていない状態です。

該当のソースコード

※所々のソースコードは省かせてもらっています。（見たいコード等ありましたら教えてください。）

・親コンポーネント

export default function SpecimenMerge(props) {

const [mergedJson, setMergedJson] = useState('');

//Deleteボタン押下時に処理
  const onSelect = (idx) => {
    const result = window.confirm('Are you sure you want to delete it?');
    if (!result) return;
    // console.log("filter処理テスト");
    let deleteAfterData;
    deleteAfterData = mergedJson.filter((r, index) => index != idx + 1);

    console.log(Object.is(deleteAfterData, mergedJson));
    setMergedJson(deleteAfterData);
  };


  return(
        <Box p={1}>

          {(() => {
            if (mergedJson != null) {
              {
                return mergedJson ? <div><SpecimenMergeResultTable datas={mergedJson} onSelect={onSelect} /></div> :
                  <TextField id="remarks" size="small" label="Data Loding..." disabled="true" fullWidth variant="outlined" />
              }
            } else {
              return <TextField id="table" size="small" label="No merge result" disabled="true" fullWidth variant="outlined" />
            }
          })()}
        </Box>
  );
}

・子コンポーネント

export default function SpecimenMergeResultTable(props) {
	const onSelect = props.onSelect;
	const [datas, setDatas] = useState(props.datas);
	console.log("************");
	console.log(props);
	console.log("************");


  return(
                       <TableBody>
							{stableSort(rows, getSorting(order, orderBy))
								.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
								.map((row, i) => {
									return (
										<TableRow
											hover
											tabIndex={-1}
											key={i}
											classes={{ root: classes.tableRow, }}
										>
											<TableCell key='firstIndex'>{page * rowsPerPage + i + 1}</TableCell>
											{header.slice(0, header.length - 1).map((h, hi) =>
												<TableCell key={hi}>{row[h.id]}</TableCell>)}
											<TableCell key='lastIndex'>
												<Button size="small" variant="outlined" onClick={() => onSelect(i)}>
													Delete
											</Button>
											</TableCell>
										</TableRow>
									);
								})}
							{emptyRows > 0 && (
								<TableRow key='emptyIndex' style={{ height: (dense ? 33 : 53) * emptyRows }}>
									<TableCell colSpan={6} />
								</TableRow>
							)}
						</TableBody>
  );
}

試したこと

まず、親コンポーネント側でObject.is関数で同じ値ではないか確認しました。(同じ場合再レンダリングされないため)
結果はfalseとなっていました。また値を変更した時に再レンダリングされていない等の場合も考えて
ボタン押下処理内で　setMergedJson(null);　のような処理を試してみました。
その結果はnullの場合のNo merge resultのような描画がされ、再レンダリングされている事が確認できました。

次に子コンポーネントで変更された値がpropsに渡ってきているかを確認しましたが
結果は削除処理後の正常な値が送られてきていました。

以上のことを試してみましたが自己解決が難しかったため
お手数をおかけしますがご教示をお願いしたいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

自己解決出来ました。
子コンポーネントの以下の箇所で値を取得してきているのですが

const [datas, setDatas] = useState(props.datas);
    console.log("************");
    console.log(props);
    console.log("************");

ログで出しているpropsの値は変更後も呼び出されますが、
datas変数はuseStateで最初に代入しているだけなので
datasの値は削除前の値をずっと保持してしまっているという事が原因でした。