I’m using library react-select, and i want to achieve something like the image below, meaning that when I click on edit, I can directly edit the options inside. I tried the code below, but I encountered an error where I couldn’t focus on the input to type.

    <Select
     ...
     components={{
      ...(onEditInOption && { Option }),
     }}
    />

    const Option = (props) => {
      return (
        <>
          <components.Option {...props}>
            <div
              style={{
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
                <div className="w-full flex gap-3 items-center">
                  <Input
                    className="flex-1"
                    type="text"
                    value={valueInput}
                    onClick={(e) => {
                      e.stopPropagation()
                    }}
                    onChange={(e) => setValueInput(e.target.value)}
                    placeholder="Enter Country"
                  />
                  <Button
                    color="gray"
                    variant="outlined"
                    className="!border-none !px-1 !py-1"
                    onClick={(e) => {
                      e.stopPropagation()
                      setOptionEdit(DEFAULT_OPTION)
                    }}
                  >
                    <X size={18} color="#f15348" weight="fill" />
                  </Button>
                </div>
              
          </components.Option>
        </>
      )
    }