How to solve "error: maximum update depth exceeded." error?

I am getting this below error

> Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Down below is the component I have 

<pre>let brandList = 'ABCEDEFGHIJKLMNOPQRSTUVWXYZ'.split("");
    
    class BrandPageComponent extends PureComponent {
    
        constructor(props) {
            super(props)
            this.state = {
                items: null,
                allBrands:{},
                filterData: "",
                filteredAllBrand: []
            }
        }
    
        isBrandsAvailable = () => this.state.items && this.state.items.length > 0;
    
        getBrands = () => {
            if (this.isBrandsAvailable()) {
              return brandList.map((key) => {
                const brandsByCharacter = this.getBrandsByCharacter(key);
                if (brandsByCharacter?.length > 0) {
                  return (
                    <div>
                      <div>{key}</div>
                      <div className="BrandWrapper_Grid">
                        {this.renderBrandDetails(brandsByCharacter)}
                      </div>
                    </div>
                  );
                }
                return null;
              });
            } else {
              return null;
            }
          };
    
        getBrandsByCharacter(key) {
            return this.state.allBrands[key]
        }
    
        getSearchBrands(){
            const lowercasedFilter = this.state.filterData.toLowerCase();
            console.log(this.state.filteredAllBrand)
            const filteredData = this.state.filteredAllBrand.filter(item => {
            return Object.keys(item).some(key =>
                item[key].toLowerCase().includes(lowercasedFilter)
            );
            });
            this.setState({
                filteredAllBrand: filteredData
            })
            return(
                <div>
                    <div>
                        {this.getBrands()}
                    </div>
                    <div>
                        {this.renderBrandDetails()}
                    </div>
                </div>
            )
        }
    
        renderBrandDetails(brands){
            if(brands && brands.length > 0){
                return  filterData.map((brand) => {
                    return(
                        <div className="BrandData_Block">
                            <img src={brand.image} alt={brand.value} style={{ width: "80px", height: "80px" }}/>
                            <p>{brand.value}</p>   
                        </div>
                        )
                    }) 
            }else {
                return null
            }
        }
    
        createBrandsMapData(){
            let brandData = {}
            brandList.map((key) => {
                brandData[key] = this.state.items.filter((currentValue) => {if(currentValue.value[0] === key) return currentValue}) 
            })
            this.setState({
                allBrands: brandData,
                filteredAllBrand: brandData
            })
        }
    
        updateSearch(event){
            this.setState({
                search: event.target.value.substr(0,20)
            })
        }
    
        getBrandSortData(){
            return(
                <div className="BrandPageList_AlphabetContainer">
                    {brandList.map((item,index) => 
                        <button key={index} className="BrandPageList_AlphabetButtons">{item}</button>
                    )}
                </div>
            )
        }
        
        async componentDidMount(){
            let brandQuery = BrandPageInstance.getBrandList();
            await fetchQuery(brandQuery).then((data) => {
                this.setState({
                    items: data.mpbrand.items,
                });
                this.createBrandsMapData()
                },
                (error) => console.log(error)
            ) 
        }
    
        handleChange = event => {
            this.setState({ filterData: event.target.value });
          };
    
        render() {
            const {filterData} = this.state
            return (
                <div className="BrandPageList_container">
                    <div className="BrandPageList_SearchBrand">
                        <input type="text" placeholder="type here to search" className="BrandPageList_Input" value={filterData} onChange={this.handleChange}/>
                    </div>
                    <div className="BrandPageList_Alphabet">
                        <ul>
                            {this.getBrandSortData()}
                        </ul>
                    </div>
                    <div>
                    {this.getSearchBrands()}
                    </div>
                </div>
                
            )
        }
    }
    
    export default BrandPageComponent

In defining the state if I make `filteredAllBrand` as an string I get different error `TypeError: this.state.filteredAllBrand.filter is not a function` in the `getSearchBrands()` function

How do i solve it?