AG Grid Issue with Cell Rendering a Custom Search Component

Question

My issue is that i am using Ag grid Community component and i have multiple grid lines buttons .For example Miscellaneous would create a new line, Labour would make another simple line but Price list item and Kit would make a new line with a Search component which is added using cell rendererselector as its first column. The issue with the search component is that if i click on the search component and try to write something and then press backspace it destroys the component and goes back to the default input component the ag grid has. I will add the code and pictures to showcase my issue. If anyone wants the whole code ask me and i can add it below.

 useEffect(() => {
    setColumnDefs(prevDefs =>{ return [ { headerName: "catalog" , field: "catalog" ,  minWidth:250,   valueGetter:  (params) => { return params.data.catalog } , 
    valueSetter: (params) => handleValueChange(params, params.colDef.field, setRows), rowDrag: params => !params.node.group , cellRendererSelector: (params) => {
      const productSearch = {
        component: FormAutocompleteInput,
        placeholder: 'Search for a product',
        params: {options: getProductOptionsArray(products), onChange: ((value) =>{
        setSelectedProduct(value.key, value.value)}), eventOnChangeCallback: ((value) => {
          setSelectedProduct(value.key, value.value)}) , label: '', onInputChange: ((event) => {
            handleSearchProducts(event);
          })}
      };
      const kitSearch = {
        component: FormAutocompleteInput,
        params: {options: getKitOptionsArray(kits), onChange: ((value) =>{
          setSelectedKits(value.key, value.value)}), eventOnChangeCallback: ((value) => {
            setSelectedKits(value.key, value.value)}) , label: '', onInputChange: ((event) => {
            handleSearchKits(event);
          })}
      };
        if (params.data.catalog === 'Price List Item') return productSearch;
        else if (params.data.catalog === 'Kit') return  kitSearch;
      return undefined;
    },
  },

Image after backspace Before back

I tried to add a custom search component me and my colleague created and use inside of our forms by using a cell renderer selector to pass params and other props it needed. I was expecting it to work fine and not break when pressing backspace or when double tapping the search component and going back to the default input field.