Inside my application, one of my components unfortunately is sending the Can't perform a React state update on an unmounted component warning. It is driving me crazy at this moment. I was trying to locate the exact place where it might be happening but unfortunately unsuccessfully.

Any ideas of what could be causing it or how to find the source of the problem? I would appreciate any help or direction where to look.

The console:

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.
CurrencySelect@http://localhost:3000/static/js/main.chunk.js:4444:24
CurrencySelect
Controller@http://localhost:3000/static/js/vendors~main.chunk.js:118828:29
CurrencySelect@http://localhost:3000/static/js/main.chunk.js:10270:26

Component:

import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';

import CountrySelectOption from '../CountrySelectOption/CountrySelectOption';
import CountrySelectValue from '../CountrySelectValue/CountrySelectValue';
import Select from '../../../custom/ChakraReactSelect/ChakraReactSelect';

import {
  getCurrencies,
  getCurrenciesOptionsData
} from '../../../../services/currencies/currenciesServices';

const currencySelectComponent = {
  Option: CountrySelectOption,
  SingleValue: CountrySelectValue
};

function CurrencySelect({ size = 'lg', isSearchable = true, ...other }) {
  const [currenciesOptions, setCurrenciesOptions] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    let isMounted = true;
    const prepareCurrenciesOptions = async () => {
      try {
        if (isMounted) {
          setIsLoading(true);
          const currencies = await (await getCurrencies()).json();
          const preparedData = getCurrenciesOptionsData(currencies);
          setCurrenciesOptions(preparedData);
          setIsLoading(false);
        }
      } catch (err) {
        console.error(err);
      }
    };

    prepareCurrenciesOptions();
    return () => {
      isMounted = false;
    };
  }, []);

  return (
    <Select
      {...other}
      size={size}
      isSearchable={isSearchable}
      isClearable
      placeholder={isLoading ? 'Loading currencies...' : 'Select currency...'}
      options={currenciesOptions}
      components={currencySelectComponent}
      isLoading={isLoading}
      isDisabled={isLoading}
      openMenuOnFocus={true}
    />
  );
}

const CurrencySelectRef = React.forwardRef((props, _) => (
  <CurrencySelect {...props} />
));

CurrencySelectRef.displayName = 'CurrencySelect';

export default CurrencySelectRef;

CurrencySelect.propTypes = {
  size: PropTypes.string,
  isSearchable: PropTypes.bool,
  ref: PropTypes.func
};