UseSelector возвращает неопределенное значение

Я использую react-redux.

createSlice:

import { createSlice } from "@reduxjs/toolkit";

const datatableSlice = createSlice({
    name: "datatable",
    initialState: {
        filters: [],
        columns: [],
    },
    reducers: {
        selectedFilters: (state,action) => {
            state.filters = action.payload;
        },
        selectedColumns: (state,action) => {
            state.columns = action.payload;
        },
    },
});

export const {
    selectedFilters,
    selectedColumns,
} = datatableSlice.actions;
export default datatableSlice.reducer;

мой магазин:

import { configureStore } from "@reduxjs/toolkit";
import datatableSlice from "./datatable";

const store = configureStore({
    reducer: {
        datatable:datatableSlice,
        [apiSlice.reducerPath]: apiSlice.reducer,
    },
});

export default store;

теперь у меня есть родительский компонент с именем ProductPage:

const ProductPage = () => {
    const filters = useSelector((state) => state.filters)
    useEffect(()=>{
        console.info("filters",filters) //always is undefined
    },[filters])

У меня есть дочерний компонент с именем Filters, и он используется внутри компонента ProductPage:

const ProductPage = () => {
    const filters = useSelector((state) => state.filters)
....
return (
..
<Filters paramFilters = {productFilters}/>
)

внутри компонента Filters я использую диспетчеризацию:

const Filters = (params) => {

    
    const dispatch = useDispatch();
    const [filters, setFilters] = useState(params.paramFilters);
    useEffect(() => {
        const initFilters = getLocalStorage(SELECTED_FILTERS);
        if (initFilters) {
            setFilters(initFilters);
            dispatch(selectedFilters(initFilters));
            
        }else{
            dispatch(selectedFilters(filters));
        }
    }, []);


    /**
     * To show or hide filters selected
     * @param {*} column_id id of each row
     * @param {*} show !show or row
     */
    const handleFilterCheckboxChange = (filter_id, show) => {
        const tmpFilts = filters.map((el) =>
            el.id === filter_id ? { ...el, show } : el
        );
        setFilters(tmpFilts);
        setLocalStorage(SELECTED_FILTERS, tmpFilts);
        dispatch(selectedFilters(tmpFilts));
    };



    return (....

но useSelector всегда не определено.