Passing Other Props to Custom ComboboxInput

[mikefogg]

I'm working on creating a custom component for the search area on a combobox and running into a bit of an issue. I know I can pass my custom component in (which works perfectly) – but I'm having trouble passing additional props!

I'm trying to do something like this:

const CustomInput = forwardRef(({ customProp, ...props }, ref) => {
  return (
    <Input
      customProp={customProp}
      {...props}
      ref={ref}
    />
  )
})

And referencing it like:

<ComboboxInput
    as={(props) => <CustomInput customProp={customValue} {...props} />}
    onChange={(event) => setQuery(event.target.value)}
/>

I think it's breaking the reference to the input itself and not working. I've tried as={(props, ref) => <CustomInput customProp={customValue} {...props} ref={ref} />} too but – no luck :)

Any suggestions would be greatly appreciated!!