react-select control not getting focused on?

[TaneshPatel92]

this is my First form control:
<Select
closeMenuOnSelect={true}
name={name}
styles={customStyle}
placeholder={placeholder || ""}
options={options}
onChange={onChange}
value={value}
isSearchable={false}
className={cl('_single-select', (err && error || error) ? 'error_input' : '')}
/>
FormikErrorFocus placed inside

<FormikErrorFocus
offset={0}
align={'top'}
ease={'linear'}
duration={300}
/>

It is not getting focused on the first react select

[blanksster]

Use this to add the name attribute to the rendered element.

  const addNameAttribute = (Component, name) => (props) => {
    return <Component {...props} name={name} />;
  };


  const CUSTOM_COMPONENTS = {
    // add name to input for error focus
    Input: addNameAttribute(components.Input, field.name),
   };

  <Select
  components={CUSTOM_COMPONENTS}
  ...
 </Select>

[blanksster]

Update, the above solution added an extra tab index, so tabbing between fields was an issue.

<Select
          ref={controlFocusRef}
          id={field.name}
          components={{
            Input: InputOverride,
            ValueContainer: ValueContainerOverride,
          }}
       ...
/>

// Need to add the data-error-key so that formik-error-focus can set the focus
// Input only renders when searchable so no need to conditionally add the error-key attribute
const InputOverride = ({ children, ...props }: InputProps) => {
  return (
    <components.Input {...props} data-error-key={props?.selectProps?.id}>
      {children}
    </components.Input>
  );
};

// this gets rendered all the time, but we only want error focus when isSearchable is disable
const ValueContainerOverride = ({ children, innerProps, ...props }: ValueContainerProps) => {
  innerProps = innerProps ?? {};

  if (!props.selectProps.isSearchable) innerProps['data-error-key'] = props?.selectProps?.id;

  return (
    <components.ValueContainer {...props} innerProps={innerProps}>
      {children}
    </components.ValueContainer>
  );
};