I want to clear filters only when the component unmounts. So I wrote cleanup function only in useEffect(). But as I checked it with console.log(), 1 was printed after the component mounted too. What's wrong in this way?

useEffect(() => {
  return () => {
    clearFilters();
    console.log(1);
  };
}, []);

Stack Snippet:

const { useState, useEffect } = React;

const Example = () => {
    useEffect(() => {
        return () => {
            // clearFilters();
            console.log(1);
        };
    }, []);
    return <div>x</div>;
};

const App = () => {
    const [showExample, setShowExample] = useState(false);
    
    return <div>
        <label>
            <input type="checkbox" checked={showExample} onChange={({currentTarget: {checked}}) => setShowExample(checked)} />
            Show <code>Example</code> component
        </label>
        <div>
            {showExample ? <Example /> : null}
        </div>
    </div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Here's a more detailed code below

import React, { useEffect } from 'react';
import { useFilterContext } from 'contexts/FilterContext';
import classNames from 'classnames/bind';
import Rating from 'components/Rating/Rating';
import { Button, Form } from 'react-bootstrap';
import styles from './Filter.module.scss';

const cn = classNames.bind(styles);

const Filter = () => {
  const {
    filters: { byAscendingPrice, byStock, byFastDelivery, rating },
    dispatch,
  } = useFilterContext();

  const clearFilters = () => dispatch({ type: 'CLEAR_FILTERS' });
  useEffect(() => {
    return () => clearFilters();
  }, []);

  return (
     // Some components
  );
};

export default Filter;