Type 'ReactI18NextChildren | Iterable<ReactI18NextChildren>' is not assignable to type 'ReactNode'

Question

I am following this link to implement react material Autocomplete.

I am using the renderInput the same way it is described in the documentation

renderInput={(params: AutocompleteRenderInputParams) => (
            <TextField
                {...params}
                placeholder="Sections"
                label='Nil Sections'
            />
        )}

But I am getting this error on TextField

Type '{ placeholder: string; label: string; id: string; disabled: boolean; fullWidth: boolean; size: "small" | undefined; InputLabelProps: Omit<HTMLAttributes<HTMLLabelElement>, "color">; InputProps: { ...; }; inputProps: InputHTMLAttributes<...> & { ...; }; }' is not assignable to type 'Omit<FilledTextFieldProps | OutlinedTextFieldProps | StandardTextFieldProps, "variant">'.
  The types of 'InputLabelProps.children' are incompatible between these types.
    Type 'ReactI18NextChildren | Iterable<ReactI18NextChildren>' is not assignable to type 'ReactNode'.
      Type 'Record<string, unknown>' is not assignable to type 'ReactNode'.
        Type 'Record<string, unknown>' is missing the following properties from type 'ReactPortal': children, type, props, key

Full error is this

And I know exactly which line is causing it, this is line that is causing it, because when I remove it from TextField the error goes away but then the Autocomplete doesn't work

{...params}

I am not sure why is it causing any problem, I am following the documentation as it is and not changing anything.

I am getting the error is saying that the type it expects is not what it is returning because of the AutocompleteRenderInputParams, these properties it does not expect in the render tag control but if we do not give these properties it does not even work.

Any leads?

Answer 1

Finally, found the solution.

So what I tried is, rather than adding the whole params I started adding the params one by one and till this point it started working perfectly.

So I replaced these from params and it works like a charm now

id={params.id}                                           
inputProps={params.inputProps}                                                       
InputProps={params.InputProps}

By approaching this way, I could also find out which exact param was causing the issue, so for my case this was the param that was causing the issue

InputLabelProps={params.InputLabelProps}