Chips not using all available width in form field

[X1X11X]

Hi there,

I have noticed a strange behavior when trying to display the chips component inside my form.
I have defined the form field as follows:

Code: Select all

<div className="field ">
                        <Controller name={"create_tags"} control={createControl}
                                    render={({field: {ref, ...field}, fieldState}) => (

                                        <Chips className={classNames(
                                            {"p-invalid": createErrors.create_tags})}
                                               {...field} id={field.name}/>

                                    )}/>
                        <label className={"p-error"}>{createErrors.create_tags?.message}</label>
                    </div>

The problem I have now is that the field for the chips has only the standard size:


However, the actual field is much wider:


However, as soon as I remove the p-chips class, the chips component takes the intended 100%, but I don't think that's the way to solve it.
I have also tried adding the "w-full" class or changing the form field to a field grid with col-12, but without success.
Also setting width or minWidth directly via styles did nothing.

So I wonder if there is a way to tell the component to take up all the available space?

Thanks in advance!