Material UI Stack Component is not displaying flex correctly - reactjs

Question

I want to implement flex system from material-ui using the Stack component Im faced with a issue. The other half of my screen is displaying another component or blank space and I dont know how to get rid of it.
I'm using the Stack component from material-ui and the normal html iframe tag to build a code editor. Any Idea how I can fix this using Stack?
Screenshot of UI:
Here is my code:
index.js
<Stack sx={{ bgcolor: 'white', pt: 1 }}>
<TabContext value={value} >
<Box sx={{ borderBottom: 1, borderColor: 'divider', bgcolor: 'white' }}>
<TabList onChange={handleChange} >
<Tab label="HTML" value="1" />
<Tab label="CSS" value="2" />
<Tab label="JS" value="3" />
<Tab label="Output" value="4" sx={{ display: { xs: 'block', md: 'none' }, mt: 1 }} />
</TabList>
</Box>
{value === '4' ?
<Stack sx={{ height: 'calc(100vh - 201px)' }}>
<iframe title="result"
sandbox="allow-scripts"
frameBorder="0"
width="100%"
srcDoc={iframeDisplay}
/>
</Stack>
:
<Stack direction="row" sx={{ width: '100%', height: '100%', position: 'relative'}}>
<Stack sx={{ width: { xs: '100%', md: '50%' }, bgcolor: "white" }}>
<TabPanel value={value} sx={{ p: 0 }}>
<CodeMirror
value={codeEditor.value}
height={CODE_EDITOR_PROPS.height}
theme={CODE_EDITOR_PROPS.theme}
extensions={codeEditor.extensions}
onChange={onChange}
/>
</TabPanel>
</Stack>
<Box sx={{ display: { xs: 'none', md:'flex' }, height: 'calc(100vh - 201px)', width: 'calc(50% - 1024px)'}}>
<iframe
title="result"
frameBorder="0"
height="calc(100vh - 201px)"
srcDoc={iframeDisplay}
/>
</Box>
</Stack>}
</TabContext>
</Stack>