Импорт веб-пакетов не работает в контексте API с использованием Reaction-router-DOM

Question

Я использую Webpack 4.42.1, реагирует 16.13.1, реагирует на 16.13.1, реагирует на маршрутизатор-дом 5.1.2, загрузчик babel 8.0.5.

Я не могу использовать переменные импорта в функциональном компоненте (или компоненте React) в компоненте маршрута, обернутом поставщиком контекста.

Это очень простая настройка. В App. js, Hashrouter, один маршрут, поставщик и один вызов в функциональном компоненте.

Вот мой код:

app. js

import React from 'react'
import { HashRouter as Router, Route } from 'react-router-dom'

// routers
import Books from './books'

const Component = (props) => {
    return (
            <Router>
                <Route exact path={'/books'}>
                    <Provider>
                        <Books />
                    </Provider>
                </Route>
            </Router>
    )
}

export default Component;

провайдер. js

import React, { useMemo, useContext, useState } from "react";
import Context from "./context"

function Provider (props) {
    const [state, setState] = useState({})

    const foo = () => {
        console.log('fighters')
    }

    return (
        <Context.Provider value={foo}>
            {props.children}
        </Context.Provider>
    );
}

const useItems = () => useContext(Context);
export { Context, useItems };
export default Provider;

список. js

import React, { useState, useEffect, useContext } from 'react';

import { useItems } from './provider';

function Component ({children}) {
    // provider handlers
    const { foo } = useItems();

    /// UNDEFINED ERROR HERE -- WHY!!??///
    return (
        <React.Fragment>
            List of Books go here
        </React.Fragment>
    )
}

export default Component;