App.js에서 만든 재고context 관련 질문

(App.js)

export let 재고context = React.createContext();

function App(){
let [재고, 재고변경] = useState([10,11,12]);

return (
<HTML많은곳/>
<재고context.Provider value={재고}>
<Detail/>
</재고context.Provider>
)
}

(Detail.js)

import {재고context} from './App.js';

function Detail(){
let 재고 = useContext(재고context); //근데 여기서 에러남 ㅅㄱ

return (
<HTML많은곳/>
<재고context.Provider value={재고}>
<Detail/>
</재고context.Provider>

항상 영상 보고나서 자료읽으며 복습을 하고 있습니다.

위의 코드는  강의에 만들어놓으신거 그대로 복붙한것인데요.

Detail.js 안에서 <Detail/>이라는걸 작성하는것과 그걸 <재고context.Provider value={재고}>로 감싸고 있는게 맞는건가요?

왜 <재고context.Provider value={재고}>로 다시한번 감싸주는건지 이해가 딱 되지가 않습니다. ㅜ