Custom component not opening on edit

[karthikCrmwebx]

im using below custom component like using select they t=can select the value and later user can edit it as per their required value.
im getting the value saved but again if the used want to edit the query builder is not opening

following is the query => [cwx_testoptionset].[set_values] = 'tes@123'

import React, { useEffect, useState } from "react";

const CustomComponent = (props: any) => {
 
  const [selectedOption, setSelectedOption] = useState("");
  const [isEditing, setIsEditing] = useState(false);
  const [editedValue, setEditedValue] = useState("");

  useEffect(() => {

    if (props.value) {
      props.setEditedValueQueryBuilder(props.value);
      setSelectedOption(props.value);
    }
  }, []);

  const handleSelectChange = (event: any) => {
    debugger;
    setSelectedOption(event.target.value);
    setEditedValue(
      props.listValues?.find((el: any) => el?.value === event.target.value)
        ?.title
    );
    props.setValue(event.target.value);
    props.setEditedValueQueryBuilder(event.target.value);
    setIsEditing(true);
  };

  const handleInputChange = (event: any) => {
    setEditedValue(event.target.value);
    debugger;
    props.setValue(event.target.value);
    props.setEditedValueQueryBuilder(event.target.value);
  };

  const handleBlur = () => {
    setIsEditing(false);
    //setSelectedOption(editedValue);
  };

  return (
    <div>
      {isEditing ? (
        <input
          type="text"
          value={editedValue}
          onChange={handleInputChange}
          onBlur={handleBlur}
          autoFocus
        />
      ) : (
        <div>
          our custom
          <select value={selectedOption} onChange={handleSelectChange}>
            <option value="" disabled>
              Select an option
            </option>
            {props.listValues.map(({ value, title }: any) => (
              <option value={value}>{title}</option>
            ))}
          </select>
        </div>
      )}
    </div>
  );
};

export default CustomComponent;

[ukrbublik]

I tried to inject your component into example app and it kinda works:

Screen.Recording.2024-07-10.at.17.21.10.mov

Why do you use props.setEditedValueQueryBuilder(event.target.value); ?