How to set defualt value when using AsyncReactSelect

[gustavomm19]

I have the following code, which is a dropdown to filter the data on a table, so the value of the option selected is used as a query string to filter the data when the page is reloaded, keeping track of the filters applied. My problem is that when the page is reloaded I cant use the querystring to pre-select the option with the same value. query.student is equal to the value property of the selected option, but it doesnt display the selected option until I do it manually
https://codesandbox.io/s/intelligent-cherry-vkq5y?file=/src/App.js

<AsyncReactSelect
                id="student-select"
                placeholder={t('filter.student')}
                isClearable
                value={studentLabel}
                defaultValue={query.student}
                getOptionValue={(option) => option.value}
                height="50px"
                fontSize="15px"
                onChange={(selected) => {
                  setStudentLabel(
                    selected !== null
                      ? {
                        id: selected?.id,
                        value: selected?.value,
                        label: selected?.label,
                      }
                      : null,
                  );
                }}
                defaultOptions
                cacheOptions
                loadOptions={(inputValue) => handlers
                  .getStudents(selectedCohort?.slug || cohortSlug, academy, inputValue !== '' ? { like: inputValue } : {})
                  .then((students) => students.map((student) => ({
                    id: student.user.id,
                    value: student.user.id,
                    label: `${student.user.first_name} ${student.user.last_name}`,
                  })))}
              />

[manjushsh]

Hi @gustavomm19 can you please share a sample codesandbox? Thanks.

[gustavomm19]

Here it is https://codesandbox.io/s/intelligent-cherry-vkq5y?file=/src/App.js

As you can see, the defaultStudent is equal to 1, so I need to preselect the option with that same value or id

[manjushsh]

Hi @gustavomm19, We can achieve this by waiting for options to load then update a state as default value. Then we can pass that state value as default option to Async select

Updated Code Sandbox link

reference