React.js Context Provider does not pass provided values to useContext

Question

Problem:

I'm using the useContext hook to pass data though the DOM, but the only data that gets passed right now, are the initial values from the ImageContext .

My Findings:

• The State images in ImageContextProvider holds the correct values (First initial declaration and alter the fetched data).
• Changing initial values of the state (not the context), findable in the ImageContextProvider , didn't change the output of the useContext hook -> Still just the inital context values were sent
• Putting everything into one file (to avoid some kind of wrong referencing) didn't fix the problem either
• Didn't find any similar problem on stack overflow

image_context.js

export const ImageContext = createContext({
    images: [],
    loading: true,
    setImages: () => {},
});


const ImageContextProvider = props => {
    const [images, setImages] = useState({
        images: [],
        loading: true
    }); // Array instead of object

    const fetchData = () => {
        imagesServices.loadImages().then((img) => {
            setImages({
                images: img,
                loading: false
            })
        })
    }

    useEffect(() => {
        fetchData();
    }, []);

    useDebugValue(images ?? 'loading...')
    let value = {images: images.images, loading: images.loading, setImages: setImages}
    return(
    <ImageContext.Provider value={value}>
        {props.children}
    </ImageContext.Provider>
    );
};

export default ImageContextProvider;

visualizer.js

const Visualizer = () => {
    return (
        <ImageContextProvider>
            <Canvas
                camera={{position:  new THREE.Vector3( 0, 0, -0.5 ), fov: 60}}>
                <ambientLight intensity={0.3}/>
                <group>
                    <ImageGroup />
                </group>
                <OrbitControls enableZoom={false} enablePan={false}/>
            </Canvas>
        </ImageContextProvider>
    );
};

export default Visualizer;

image_group.js

const ImageGroup = (props) => {
    const {
        roomID = '0',
        ...restProps
    } = props;
    const {images, loading, setImages} = useContext(ImageContext);

    if (images.loading) return null

    return (
        <Suspense fallback={null}>
            {
                images.map((img) =>
                    (<ImagePlane key={img['imageID']} imgLink={img['imgLink']} position={img['position']}  aspectRatio={img['aspect_ratio']}/>)
                )
            }
        </Suspense>
    );
};

export default ImageGroup;

Answer 1

The solution to my problem was to put the ImageContextProvider inside the canvas. This is necessary, because elements inside the canvas are using a different context, as explained here: https://github.com/pmndrs/react-three-fiber/blob/master/docs/API/hooks.mdx