В React (Next. js), зачем вам импортировать файл контекста при использовании useContext

Question

Используя перехватчики с React (Next. js), вы можете создавать контекстные данные для использования в качестве поставщика для своих дочерних элементов.

Почему тогда, когда вы вкладываете ребенка между провайдерами, вам также необходимо импортировать провайдера?

Чтобы проиллюстрировать это на примере, мне интересно, зачем мне нужно

import {GSBannerContext} from '../context/GSBannerContext';

Когда Banner.js является дочерним элементом контекста. Вот как выглядят мои файлы:

GSBannerContext

import {useState, createContext} from 'react';

export const GSBannerContext = createContext();

export const GSBannerProvider = props => {
  const [cards, setCards] = useState([
    {
      header: 'Get the app',
      description: 'Download the app on the App Store or Google Play for workouts on the go',
    },
    {
      header: 'Unlimited on-demand access',
      description: 'Access 2,000 on-demand workouts on your phone and laptop, or stream to your television for free',
    },
    {
      header: 'Livestream top-rated classes',
      description: 'Book livestreaming classes and pay as you go',
    }
  ])
  return (
    <GSBannerContext.Provider value={[cards, setCards]}>
      {props.children}
    </GSBannerContext.Provider>
  )
}

Соответствующий index.js фрагмент

<GSBannerProvider>
  <Banner title={'Getting started is easy'} context={'GSBannerContext'}/>
</GSBannerProvider>

Баннер. js

import css from './module-styles/banner.module.scss';
import {useContext} from 'react';
import {GSBannerContext} from '../context/GSBannerContext';
import NumberPoint from '../components/NumberPoint';

const Banner = (props) => {
  const [cards, setCards] = useContext(GSBannerContext);
  let i = 0;
  return (
    <div className={css.banner}>
      <div className="marginsContainer">
        <h2 className={css.title}>{props.title}</h2>
        <div className={css.layout}>
          {cards.map(card => {
            console.log(card)
            return (
              <NumberPoint key={i} card={card} numbers={[1,2,3]} iterate={i++}/>
            )
          })}
        </div>
      </div>
    </div>
  )
}

export default Banner;

Что меня больше всего интересует, так это зачем мне импортировать контекст, если баннер является его дочерним элементом?