Default values not respected when nested inside of another component.

[andrianarivo]

interface TopicSelectProps {
  topics: TopicFieldsFragment[];
  defaultSelectedTopics: TopicFieldsFragment[];
  onTopicsChange: (topicIds: number[]) => void;
}

export function TopicSelect({ topics, defaultSelectedTopics, onTopicsChange }: TopicSelectProps) {
  const [selectedTopics, setSelectedTopics] = useState<string[]>(
    defaultSelectedTopics.map((topic) => topic.id.toString())
  );

  useEffect(() => {
    setSelectedTopics(defaultSelectedTopics.map((topic) => topic.id.toString()));
  }, [defaultSelectedTopics]);
  
  const topicsList = topics.map((topic) => ({
    value: topic.id.toString(),
    label: topic.name,
  }));

  const handleValueChange = (values: string[]) => {
    console.log("handleValueChange");
    console.table(values);

    setSelectedTopics(values);
    onTopicsChange(values.map((v) => parseInt(v, 10)));
  };

  console.log("Topic Select");
  console.log("Selected Topics:");
  console.table(selectedTopics);
  console.log("Topics List:");
  console.table(topicsList);
  console.log("My Topics:");
  console.table(defaultSelectedTopics.map((topic) => topic.id.toString()));

  return (
    <div className="max-w-xl">
      <h1 className="text-lg font-medium mb-4">I'm interested in:</h1>
      <MultipleSelect
        options={topicsList}
        onValueChange={handleValueChange}
        defaultValue={selectedTopics}
        placeholder="Select topics"
        variant="inverted"
        animation={2}
        maxCount={3}
      />
    </div>
  );
}

The useEffect should update the default values, but even so, the UI is not up to date.
I create a PR for this here

[cuongdn-lgcns]

I don't know that reason in the Multiselect component, the value of "selectedValues" not updated in spite of the "defaultValue" change. So i have fixed with useEffect end it works. The resolve image below