Ant Design of Transfer doesn't show Initial value in right side

Question

I'm refering this to implement the transfer list.

But even though I did the same way as above, initial value was not shown in right side.
I'm faceing this problem in all day.

This is my code.

export default function UsersDetailPage(props: { project_id: number }) {

  const [leftDetailSkill, setLeftDetailSkill] = React.useState<[]>([]);
  function changeLeftDetailSkill(skill: React.SetStateAction<[]>) {
    setLeftDetailSkill(skill);
  }
  const [rightDetailSkill, setRightDetailSkill] = React.useState<[]>([]);
  function changeRightDetailSkill(skill: React.SetStateAction<[]>) {
    setRightDetailSkill(skill);
  }

...
  return (
          <ProjectInput
            WrapData={{
              rightSkill: rightDetailSkill,
              changeRightSkill: changeRightDetailSkill,
              leftSkill: leftDetailSkill,
              changeLeftDetailSkill: changeLeftDetailSkill,
            }}
          />
  )

export default function ProjectInput(props: ProjectInputProps) {
  return (
          <PrTransferListSkills
            {...{
              items: props.WrapData.leftSkill,
              rightSkill: props.WrapData.rightSkill,
              changeRightSkill: props.WrapData.changeRightSkill,
              changeLeftDetailSkill: props.WrapData.changeLeftDetailSkill,
            }}
          />
...

import { Transfer } from "antd";

const TransferListComponent = React.memo((props: TransferListProps) => {
  const tmpRight: any = [];
  const tmpLeft: any = [];

  const handleChange = (value: any) => {
    props.changeRightSkill(value);
  };

  const getMock = () => {
    axios
      .get(`${process.env.NEXT_PUBLIC_ENDPOINT}/admin/pr_detail_data/`, {
      ...
      })
      .then((response) => {
        response.data.project_key.map((value: []) => {
          tmpRight.push(value);
        });
        response.data.detail_skills.map((value: []) => {
          tmpLeft.push(value);
        });

        props.changeLeftDetailSkill(tmpLeft);
        props.changeRightSkill(tmpRight);
      })
      .catch(() => {});
  };

  useEffect(() => {
    getMock();
  }, []);

  return (
    <Transfer
      showSearch
      dataSource={props.items}
      render={(item) => item.name}
      targetKeys={props.rightSkill}
      onChange={handleChange}
    />
  );
});

export default function PrTransferListSkills(props: TransferListProps) {
  return (
    <TransferListComponent
      {...{
        items: props.items,
        changeLeftDetailSkill: props.changeLeftDetailSkill,
        rightSkill: props.rightSkill,
        changeRightSkill: props.changeRightSkill,
      }}
    />
  );
}

Using axios I'll fetch like [1, 4] as number[] and [{id: 2 , key:2, name: "Javascript"}] as {id: number, key: number, name: string}[]

From above code, transferring and initial value of left side are fine.

enter image description here

But initial value of right side is not shown when display is mounted.
I think if initial value of right side is number or string[] it is supposed to show the value to corresponded to key.

Let me show my initial value of right side.

0: 1
1: 4
length: 2

Then if I transfer one value from left side, the value would be:

0: 2
1: 1
2: 4
length: 3

However The value is only shown 0: 2
I really can't understand how I should do..

Answer 1

Just luck left side data..
Left side data must contain right side data.

That's why initial value was not shown.

• Before

left-side data

{
id: 3
key: 3
name: example3
},
]

right-side data

[1,2]

• After

left-side data

{
id: 1
key: 1
name: example1
},
{
id: 2
key: 2
name: example2
},
{
id: 3
key: 3
name: example3
},
]

right-side data

[1,2]