I want to enable the user to add custom text if the choice they think is suitable is not among the options shown in the "Select" option. I've successfully created a custom text field, but getting user input and setting it as the value of a select component is becoming a pain (sounds easy to do, but for some reason it's not working) This is my implementation

const [selectedpurpose, setSelectedPurpose] = useState<string>("");// selected value of the select component
  const [customOption, setCustomOption] = useState<string>("");//custom userinput
  
   const [dropoptions, setDropOptions] = useState([
{ value: "General Meeting", label: "General Meeting" },
{ value: "Consultation Meeting", label: "Consultation Meeting" },
{ value: "AdCampaign Meeting", label: "Ad Campaign Meeting" },
{ value: "Marketing Meeting", label: "Marketing Meeting" },
 ]);//select options

 // function to recored custom user input
 const handleAddOption = () => {
  if (customOption) {
  const newOption = { value: customOption, label: customOption };
  setDropOptions([newOption, ...dropoptions]);
  setSelectedPurpose(customOption);
  setCustomOption("");
 }
 };
    
   //my form
   <Form.Item
          name="purpose"
          label="Purpose of Visit"
          rules={[
            {
              required: true,
              message: "Please select Purpose of Visit!",
            },
          ]}
        >
          <Select
            defaultActiveFirstOption={false}
            value={selectedpurpose}
            onChange={(e) => {
              if (customOption) {
                setSelectedPurpose(customOption);
              }else{
                setSelectedPurpose(e)
              }
            }}
            dropdownRender={(menu) => (
              <div>
                {menu}
                <div
                  style={{
                    display: "flex",
                    flexWrap: "nowrap",
                    padding: 8,
                  }}
                >
                  <Input
                    style={{ flex: "auto" }}
                    maxLength={20}
                    value={customOption}
                    onChange={(e) => {
                      if (e.target.value.length > 20) {
                        // if user has reached the maximum length
                        // show a message or change the color of the input to indicate the limit has been reached
                        // for example:
                        openNotificationWithIcon(
                          "error",
                          "Warning",
                          "Maximum length reached!"
                        );
                      } else {
                        setCustomOption(e.target.value);
                      }
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        handleAddOption();
                      }
                    }}
                  />
                  <Button
                    type="link"
                    onClick={handleAddOption}
                    style={{ flex: "none", padding: "0px 4px" }}
                  >
                    Add
                  </Button>
                </div>
              </div>
            )}
          >
            {dropoptions.map((option) => (
              <Option key={option.value} value={option.value}>
                {option.label}
              </Option>
            ))}
          </Select>
        </Form.Item>

What am I doing wrong, according to my code, clicking the add button button and pressing enter should add the new value to the options array and select the user input as the value for the select component, but so far it only Add it to the options array and ignore setting it as the selection value Thanks for any help