Define a Typescript Interface Value as either a set of strings or whatever was passed as an argument

Question

I am not sure if I phrased the question title correctly - I am working on react components in a library that have a certain set of predefined values for some of the properties. But on a per usage basis, additional values need to be added to the interface. This works well so far:

export interface CompProps<Variant = string> {
  variant?: 'banana' | 'strawberry' | Variant;
}

I noticed though, that when working with the component, it will now accept any string for the variant property and the IDE will also not suggest these predefined values under certain circumstances.

What is the proper way to go about this?