Creating Custom Value Editor in React - Query Builder

I am using this React Query Builder library and I wanted to know if I can use my custom-value editor such that I can have 2 inputs for a single field.

For Example -

Let say my field name is Full Name - Operator is, let say, equal to - '=' then I want two inputs to appear: for the First Name and the Last Name

I tried creating one component which composed of a div element and that div element itself contains those 2 input elements. Although the component is rendering on the UI, but its not returning the appropriate query.

CustomValueEditor

const CustomValueEditor = ({ value, field }) => {
    const [days,setDays] = useState(0);
    const [months,setMonths] = useState(0);
    const updateValue = (key, newVal) => {
      // Using state to change the values based upon the key
    };

    return (
      <div>
        <input
          type="number"
          value={months}
          onChange={(e) => updateValue('month', e.target.value)}
        />
        <input
          type="number"
          value={days}
          onChange={(e) => updateValue('days', e.target.value)}
        />
      </div>
    );
};

export default CustomValueEditor;

<QueryBuilder
        fields={fields}
        query={query}
        onQueryChange={q => setQuery(q)}
        controlElements={{
          valueEditor: (props) => {
                if(props.field==='age') {
                    return <CustomValueEditor {...props} />
                }
                return <ValueEditor {...props} />
            } 
        }}
      />