react-hook-form 및 react-table을 사용하면서 문제가 풀리지 않아서 질문드려요..

값은 실제로 서브밋할때 변경이 되지만, 화면상에서 다른 매체를 선택한 생성일로 표시가 안되는 문제입니다.ㅠ

useEffect(() => { if (selectedMedia && selectedMedia.billDate) { setValue(`medias.${selectedIndex}.billDate`, selectedMedia.billDate); } }, [selectedIndex, selectedMedia, setValue]); 이런식으로 선언을 하니깐, billDate는 변경이 되는데, 값이 10개 20개인 경우 일일히 하나씩 선언을 해줘야 하나요?... ㅠㅠ

아래 처럼 코드를 추가하니깐 테이블에서 매체를 선택할때마다 선택한 매체의 해당하는 값으로 변경이되고, 변경된 값도 적용이 잘 되는데, 초보자라 이게 맞는건지를 모르겠네요.. 도움 주실분 안계실까요?...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
type CampaignMediaKeys = keyof CampaignMedia;
    type IndexedMediaKeys = `medias.${number}.${CampaignMediaKeys}`;

    useEffect(() => {
      if (selectedMedia) {
        Object.entries(selectedMedia).forEach(([key, value]) => {
          const fieldPath: IndexedMediaKeys = `medias.${selectedIndex}.${key}` as IndexedMediaKeys;
          setValue(fieldPath, value);
        });
      }
    }, [selectedMedia, selectedIndex, setValue]);

이런 코드를 추가하고,

<Controller
                        name={`medias.${selectedIndex}.billDate`}
                        control={control}
                        render={({ field: { onChange, value } }) => (
                          <DesktopDatePicker
                            format="yyyy-MM-dd"
                            value={value ? new Date(value) : null}
                            onChange={(newValue) => {
                              const formattedDate = newValue ? format(newValue, 'yyyy-MM-dd') : null;
                              onChange(formattedDate || null); // 새로운 값이 있으면 그 값을, 없으면 null을 설정
                              update(selectedIndex, { ...fields[selectedIndex], billDate:formattedDate!});
                            }}
                            slotProps={
                              {
                                textField: {
                                  label: '계산서 발행일',
                                  fullWidth: true,
                                  id: 'media-billDate'
                                },
                                actionBar: {
                                  actions: ['clear']
                                }
                              }
                            }
                          />
                        )}
                      />