Dropdown list is rerendering due to dynamic placeholder

[sahilahluwalia]

Currently, my code looks like this:

jsx

const dropdown = useMemo(() => (
<DropdownTreeSelect
{...props}
onChange={handleChange}
data={treeData}
/>
), [treeData, props.texts?.placeholder, props.disabled]);

return (
<>{dropdown}</>
);

I am using a dynamic placeholder that determines the text based on the selected options of the dropdown. By enabling the placeholder in the useMemo hook, my dropdown gets re-rendered, and all the checked options are lost in the UI. If I don't add the placeholder prop in useMemo, the placeholder is not updated in the UI.

How can I enable checked elements with a dynamic placeholder? I am trying to manually maintain the list of checked elements on my own, but it is still buggy at the moment. Please guide me on the available options.

[sahilahluwalia]

@mrchief can you please share your views?