react stateの配列の中のオブジェクトの値を更新したい

Question

stateのdataのlanguageは配列で、その中にLangとLevelのオブジェクトが入っています。
onClickUpdateLanguageが呼ばれたときに引数valueにLevelのオブジェクトが渡ってきます。

const targetの処理で現在のstateの中から引数で渡ってきたupdateStateIdとlang.idが同じlanguageの配列をtaegetに入れています。
このtargetに引数で渡ってきたvalueを入れて、現在のstateを更新したいです。

どうやったらいいのでしょうか？
わかる人いましたらご教授お願いしたいです

interface Data {
  name: string;
  language: Language[];
}

interface Language {
  lang: Lang;
  level: Level;
}
interface Lang {
  id: name;
  name: string
}
interface Level {
  id: name;
  name: string
}

interface State {
  data: Data;
  text: string;
  modal: boolean
}

const Index: FC = () => {
  const [state, setState] = useState<State>({
    data: initialdata,
    text: '',
    modal: false,
  });


// valueにLevelのオブジェクトが引数で渡される。現在のstate.languageの配列のlevelにvalueの値を入れたい。
const onClickUpdateLanguage = (value: Level, updateStateId: number) => {
    const target = state.data.language.find((st) => {
      return st.language.id === updateStateId;
    });
  };

Answer 1

以下の通り実装することで、副作用なくできると思います。

const onClickUpdateLanguage = (value: Level, updateStateId: number) => {
  // 更新したい Language を新規変数で用意しておきます。
  const updatedLanguage = {id: updateStateId, level: value}

  // 更新したくない Language のリストを生成します。
  const notUpdateLanguage = state.data.language.filter((lg) => {
    // ここ、st.language.id になっていましたが、find が language に紐づいているので、こうじゃないですか？
    return lg.id !== updateStateId;
  });

  // 更新したくないものと更新したものをまとめます。
  const newLanguage = [...notUpdateLanguage, updatedLanguage]

  setState({
    data : {
      ...state.data,
      language: newLanguage
    }
  });
};

Answer 2

対象要素の取得はできているようなので、あとはvalueを使って要素を更新し、配列中の元々あった箇所に差し替えてからsetStateを実行すればいけると思います。

const onClickUpdateLanguage = (value: Level, updateStateId: number) => {
  // 直接stateの配列を操作できないのでコピーしておく
  let cloneLanguage = [...state.data.language];
  // 対象となるlanguageを特定
  const target = state.data.language.find((st) => {
    return st.language.id === updateStateId;
  });
  // targetの配列中でのindexを保持しておく
  const targetIndex = state.data.language.indexOf(target);
  // levelを差し替え
  target.level = value;
  // targetIndexを元にcloneLanguageの対象となる要素をtargetに入れ替え
  cloneLanguage.splice(targetIndex,1,target);

  this.setState({
    data : {
      ...this.state.data,
      language : cloneLanguage
    }
  });
};