Combobox (CommandPrimitive.Group) Not Re-rendering with Component

[tylerpashigian]

I have this combobox component built on top of the Radix CommandPrimative that allows for multi-select and creating a custom option if there are no search results found. I am running into an issue where a user may want to create a custom value even if there are similar results. On the branch I linked, I’ve added the avilableOptions variable, which should add a custom option if the search value isn’t empty and the props allow for custom values. I am seeing something strange where the value is correctly added to my availableOptions (tested by logging the values) but it is not reflected in the options in the dropdown. However if I close the popover and I reopen it with the value in the search field, the option is available. I assume this is due to one of the nested components not re-rendering properly. Does anyone have an idea on this?

To provide some context, I have a recipe book and I’m selecting from predefined ingredients, but adding a new one if it doesn't exist. This works if there are no results found, but when trying to add "bacon”, “dry elbow macaroni” is being returned as a similar search result.