I have a component

<ButtonGroup
  value={value}
  options={[1, 2, 3, 4, 5, 6].map((x) => {
    return { label: x, value: x };
  })}
/>

I am using Flow for type checking and want to know, whether it is possible to have ButtonGroup component be generically typed in such a way that it will raise a Flow error if type of value is not the same as type of option.[0].value? This should work for any matching type, e.g number, array, etc. and only raise if type of value and option[at_some_index].value are different

What I currently have:

type Props<T> = {
  options: Array<{
    label: React$Node,
    value: T,
  }>,
  value: T,

};

This works fine for checking matching types but only for a particular type. E.g if I do

export const ButtonGroup = ({options, value}: Props<number>) => {do stuff}

It will work for number types as expected, but if I add union types to have the same behaviour for strings, arrays, like so Props<number | string | []> flow stops raising an error if types of values don't match.

Below also doesn't work:

export const ButtonGroup = <T>({options, value}: Props<T>) => {do stuff}

I know this can be done in Typescript and was just wondering whether this can be done in Flow?

Thank you!