React-Select: Migrating from V4 to V5 giving undefined value on form submit

Question

I am trying to migrate from react-select v4 to v5. The form/field in question works with v4 while utilizing Uniform for the form returning an example output such as:

{
  "skill": {
    "value": "skill1",
    "label": "Skill 1"
  }
}

When I try with V5 I get an empty object.

Going through the react-select update guide I believe the part of interest is in regards to them using forwardRef instead of ref now?

There is a Form page that uses a 'Dropdown' component which is where I utilize react-select.

// FormPage.jsx (simplified)
// Imports
...
import { Form } from "@unform/web";
import Dropdown from "../Input Fields/Dropdown" // The dropdown component with react-select
...
...
export default function DummyPage() {
  ...
  ...
  const selectOptions = [
    { value: 'skill1', label: 'Tutoring' },
    { value: 'skill2', label: 'English Lessons' },
    { value: 'skill3', label: 'Cricket Coaching' },
  ]

  return (
      <Form ref={formRef} onSubmit={handleSubmit} >
        <Dropdown 
            name="skill" 
            label="Dummy Label" 
            type="text"
            options={selectOptions}
        />
        <div>
          <button type="submit">Submit</button>
        </div>
      </Form>
  );
}

// Dropdown.jsx (Full)
import { useEffect, useRef } from "react";
import { useField } from "@unform/core";
import Select from "react-select";

const Dropdown = ({ name, label, options, ...rest }) => {
  const selectRef = useRef(null)

  const { fieldName, defaultValue, registerField, error } = useField(name)
  
  useEffect(() => {
    registerField({
      name: fieldName,
      ref: selectRef.current,
      getValue: (ref) => ref.state.value, // <- Tried setting this to ref.value
      setValue: (ref, value) => {
        ref.select.setValue(value || null); // <- Tried setting this to ref.setValue
      },
      clearValue: (ref) => {
        ref.select.clearValue(); // <- Tried setting this to ref.clearValue
      }
    });
  }, [fieldName, registerField]);

  return (
    <div>
      <label htmlFor={fieldName}>{label}</label>
      <br/>
      <Select
        id={fieldName}
        ref={selectRef}
        defaultValue={defaultValue}
        options={options}
        {...rest}
      />

      {error && <span className="error">{error}</span>}
    </div>
  );
};

export default Dropdown;

The code in the Dropdown.jsx works for V4 but I can't figure out what I need to change for the migration to V5 despite having gone through the migration guide (linked to the docs in the beginning).

Answer 1

I found a solution.

I started the project with react-select v5 and then downgraded when it wasn't working to v3 and then v4. After switching back to v5 and running yarn to 'install' it again. I then ran yarn upgrade react-select and then it started working. Not sure this will work for everyone, but it worked for me. The code I posted was indeed correct.