const renderTitle = () => (
      <span style={{display:'flex',justifyContent:'space-between'}}>
        <span>Name</span>
        {/* <span>Code</span> */}
        <span>Balance</span>
      </span>
    );
    const renderItem = (ledger_id,ledger_code, name, balance) => ({
      key: ledger_id,
      value: name,
      label: (
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          <span>
             {name}
          </span>
          {/* <span>
          {ledger_code}
          </span> */}
          <span>
             {balance}
          </span>
        </div>
      ),
    });


const handleSearch = (search, type) => {
        console.log("type====>",type);
        console.log("search====>",search);
        if(type === 'ledger'){
          fetchLedger(search).then((data) =>{
            console.log("data--newone==>",data);
            const fetchedOptions = data.map((item) => renderItem(item.ledger_id, item.ledger_code, item.value, item.current_balance));
            setLedgerList([
              {
                label: renderTitle(),
                options: fetchedOptions
              }
            ])
          })
        }
    }

    const handleChange = async(value,option, name) => {
      // const updatedData = props.dataSource.map(item => {
        console.log("value===>",value);
        console.log("option===>",option);
        console.log("option.key===>",option.key);
        console.log("name===>",name);
        if (name === 'ledger'){
          const response = await api.post(`${dotzURL}ledger/ledger-basic/`,{organization:orgId,ledger_id:option.key})
          console.log("response---->",response.data.data);
          const ledgerData = response.data.data
          setState((prevState) => ({
            ...prevState,
            ledgerId: ledgerData.id,
            name: ledgerData.value,
            code : ledgerData.ledger_code,
            balance : ledgerData.current_balance
          }));
        }
    };

-----------------------

<AutoComplete
            options={ledgerList}
            size="large"
            style={{
            width: '100%',
            }}
            onSearch={(text) => handleSearch(text, 'ledger')}
            onSelect={(value, option) => handleChange(value,option, 'ledger')}

            placeholder="Select Customer"
            defaultValue={state.name}
            autoFocus
            allowClear
        />