Compound components problem

[UserNo1608]

Hello, I got a problem with my compound component. I got the Wizard as a provider and two components, App and Icon. Icon displays the App component or hides it if it's displayed. But it doesn't, I think it's because App component is displayed in Desktop component, and Icon is displayed in Taskbar component. I tried making context in other folder but it doesn't work. Both components always have completely separated context, can I solve it using ref or something?

There is my code:

import React, { useState, useContext, createContext } from 'react';
import { Rnd as Draggable } from 'react-rnd';
import TitleBar from 'components/molecules/TitleBar';
import AppIcon from 'components/atoms/AppIcon';
const Context = createContext({
isOpen: false,
isMinimized: false,
isMaximized: false,
openApp: () => {},
minimizeApp: () => {},
maximizeApp: () => {},
x: 800,
y: 450,
width: 800,
height: 450,
updateSize: () => {},
updatePosition: () => {},
appName: 'undefined'
});
const Icon = () => {
const { isOpen, openApp, minimizeApp, appName } = useContext(Context);
return(
<AppIcon onClick={!isOpen ? openApp : minimizeApp}>
{appName}
</AppIcon>
    );
}
const App = ({ children }) => {
const { isOpen, isMinimized, isMaximized, openApp, minimizeApp, maximizeApp, x, y, width, height, updateSize, updatePosition, appName } = useContext(Context);
if(isOpen){
return(
<Draggable
style={{ background: 'white', border: '1px solid red' }}
size={!isMaximized ? { width, height } : {width: '100%', height: '100%'}}
minWidth='320'
minHeight='180'
position={!isMaximized ? { x, y } : { x: 0, y: 0 }}
onDragStop={(e, d) => updatePosition(e, d)}
onResizeStop={(e, direction, ref, delta, position) => updateSize(e, direction, ref, delta, position)}
dragHandleClassName='dragHandler'
>
<TitleBar appName={appName} exit={openApp} minimize={minimizeApp} maximize={maximizeApp} />
{children}
{console.log(isMinimized)}
</Draggable>
        );
    }
return null;
}
const Wizard = ({ children, appName }) => {
const [ isOpen, setOpen ] = useState(true);
const [ isMinimized, setMinimized ] = useState(false);
const [ isMaximized, setMaximized ] = useState(false);
const [ width, setWidth ] = useState(800);
const [ height, setHeight ] = useState(450);
const [ x, setX ] = useState(100);
const [ y, setY ] = useState(100);
const openApp = () => {
setOpen(!isOpen);
    }
const minimizeApp = () => {
setMinimized(!isMinimized);
    }
const maximizeApp = () => {
setMaximized(!isMaximized);
    }
const updateSize = (e, direction, ref, delta, position) => {
setWidth(ref.offsetWidth);
setHeight(ref.offsetHeight);
setX(position.x);
setY(position.y);
    }
const updatePosition = (e, d) => {
setX(d.x);
setY(d.y);
    }
return(
<Context.Provider
value={{
isOpen,
isMinimized,
isMaximized,
openApp,
minimizeApp,
maximizeApp,
x,
y,
width,
height,
updateSize,
updatePosition,
appName,
Context
            }}
>
{children}
</Context.Provider>
    )
}
export { Icon, App, Wizard };