Memory leak warning in functional component

See more:

Javascript

ReactJS

ES6

Hi i am getting an warning message on my react functional component.
Warning :

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function

Below is my functional component

import React, { useState, useEffect } from 'react';
import { ErrorMessage } from "formik";
import _ from 'lodash'
import { Input } from "antd";
import './custom-input.less';

const InputSearchFilter = (props) => {
    const { placeholder, loading, arrayToFilter, value, name, onChange, onBlur, touched, 
          label, row, err, disabled } = props;

    const [valueObject, setValueObject] = useState({ medicalSchool: null, 
                                                        medicalSchoolId: null });
    const [showList, setShowList] = useState(false);
    const [filteredList, setFilteredList] = useState([]);

    return (
        <div className="input__wrap InputSearchFilter">
            {!(err && touched) ? label !== undefined && <div className="input__label"> 
            {label}</div> : ""}
            <ErrorMessage name={name}>
                {errorMessage => <div className="input__error">{errorMessage}</div>}
            </ErrorMessage>
            <Input.Search
                rows={row}
                disabled={disabled}
                name={name}
                allowClear
                value={valueObject.medicalSchool && valueObject.medicalSchool}
                placeholder={placeholder}
                onChange={onChangeText}
                onBlur={(ev) => {
                    onBlur(ev)
                    setTimeout(() => {
                        setShowList(false)
                    }, 1000, [setShowList]);
                }}
                autoComplete="off"
                loading={loading}
            />
            {showList && filteredList.length > 0 ?
                <div className="listContainer">
                    {filteredList.map((item, index) => {
                        return (
                            <div style={{ display: 'contents' }} key={item.value} 
                                 onClick={(e) => {
                                // e.stopPropagation();
                                // e.preventDefault();
                                handleSelectListItem(item)
                            }}>
                                <div className="list-item" >
                                    {item.label}
                                </div>
                                {index - 1 < filteredList.length - 2 ? <span 
                                               className='list-seperator' /> : null}
                            </div>
                        )
                    })}
                </div>
                : null}
        </div >
    );
}

export default InputSearchFilter;

What I have tried:

this component i have used in formik form inside a drawer. that drawer gets closed when i click outside of it.

I have tried removing the onBlur function, then it disables the warning,

onBlur={(ev) => {
                   onBlur(ev)
                   setTimeout(() => {
                       setShowList(false)
                   }, 1000, [setShowList]);
               }}

but the problem is i want the setShowList(false) function to be get executed when i click outside of the textbox. How can i do so ?? Please suggest some idea.