# How to clear ProjectPicker value while using AsyncSelect in CustomUI?

**URL:** <https://community.developer.atlassian.com/t/how-to-clear-projectpicker-value-while-using-asyncselect-in-customui/72037>\
**Category:** Forge UI Kit and Custom UI\
**Tags:** select\
**Created:** [August 17, 2023, 2:00am UTC](https://community.developer.atlassian.com/t/how-to-clear-projectpicker-value-while-using-asyncselect-in-customui/72037 "2023-08-17T02:00:44Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![anirudhmaddy](https://avatars.discourse-cdn.com/v4/letter/a/43a26b/32.png) [@anirudhmaddy](https://community.developer.atlassian.com/u/anirudhmaddy)\
**Post date:** [August 17, 2023, 2:00am UTC](https://community.developer.atlassian.com/t/how-to-clear-projectpicker-value-while-using-asyncselect-in-customui/72037/1 "2023-08-17T02:00:44Z")

</div>

Here is my code for Project Picker using Custom UI.

```auto
// eslint-disable-next-line no-use-before-define
import React, { useState, useEffect } from 'react';
import { Field, HelperMessage } from '@atlaskit/form';
import { requestJira } from '@forge/bridge';
import { AsyncSelect } from '@atlaskit/select';
import { IProjectOption } from '../../../../forge/src/models/Jira';
import { getProjectOptions } from '../services/user-service';

interface IProps {
    fieldKey: string
    required: boolean
    label: string
    defaultValue: IProjectOption | undefined
    value: IProjectOption | undefined
    isDisabled: boolean
    handleChange: (param: string, value: any) => void;
}

export default function ProjectsList(props: IProps) {
  const {
    fieldKey, required, label, defaultValue, value, isDisabled, handleChange,
  } = props;

  console.log('Current Value>>>', value);

  const formatLabel = (project: IProjectOption) => (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
      }}
    >
      <img
        width={16}
        height={16}
        alt={project.label.name}
        src={project.label.avatarUrls['24x24']}
      />
      <span
        style={{ marginLeft: 5 }}
        id="project-span"
      >
        {project.label.name}
        (
        {project.label.key}
        )
      </span>
    </div>
  );

  // const valueChange = (val) => {
  // console.log('handleChange>>>>>', val);
  // handleChange(fieldKey, val);
  // };

  const valueChange = (val) => {
    const selectedValue = val || null; // Use null to clear the selection
    console.log('handleChange>>>>>', selectedValue);
    handleChange(fieldKey, selectedValue);
  };

  return (

    <div>

      <Field
        key={fieldKey}
        label={label}
        name={fieldKey}
        id={fieldKey}
        // defaultValue={defaultValue}
        isDisabled={isDisabled}
        isRequired={required}
      >
        {({ fieldProps: { id, ...rest } }) => (
        /* @ts-ignore */
          <AsyncSelect
            {...rest}
            loadOptions={getProjectOptions}
            formatOptionLabel={formatLabel}
            inputId={id}
            onChange={(selectedValue) => valueChange(selectedValue)}
            cacheOptions={false}
            value={value}
            defaultValue={undefined}
            required={required}
            menuPosition="fixed"
            menuContainerStyle={{ zIndex: 9999 }}
            defaultOptions
            isClearable
          />

        )}

      </Field>
      <HelperMessage>This is helper message</HelperMessage>
    </div>
  );
}

```

How do I force reload the component? Even though I pass `undefined` as value, the old option which I previously selected still shows. I tried ` cacheOptions={false}`, but that doesn’t seem to work. Only when I click on the clear options icon, it gets cleared.

Has anyone found a solution for this?