I have this value declaration:

const [value, setValue] = useState<PaymentOption | null>(null);

And within a component, I have this OnChange function, which calls setValue:

    onChange={(event, newValue, reason) => {
      setValue(newValue);
      const { onChange } = props;
      if (onChange) onChange(event, newValue, reason);
    }}

But I keep getting this error (when hovering over the setValue call and during building):

TS2345: Argument of type 'string | PaymentOption | (string | PaymentOption)[] | null' is not assignable to parameter of type 'SetStateAction<PaymentOption | null>'.   Type 'string' is not assignable to type 'SetStateAction<PaymentOption | null>'.

I've tried setting the type on the newValue, i.e.,

onChange={(event, newValue: PaymentOption | null, reason) => {

But then I get this error:

  Type 'string | PaymentOption | (string | PaymentOption)[] | null' is not assignable to type 'PaymentOption | null'.

And if I try changing the setValue to this:

const [value, setValue] = useState<string | PaymentOption | (string | PaymentOption)[] | null>(null);

And the onChange to match:

onChange={(event, newValue: string | PaymentOption | (string | PaymentOption)[] | null, reason) => {

Then the errors go away here, but then all my value.vars say:

TS2339: Property 'label' does not exist on type 'string | PaymentOption | (string | PaymentOption)[]'.   Property 'label' does not exist on type 'string'.

Anyone have any clue what's going on? Even any hints?