tinymce fixed toolbar does not work with scrollable element

Question

i use tinymce version 5.10.7 with React and MUI library. I try to make tinymce toolbar work so that it stays on the top of the page when writing long texts. Issue is that the toolbar disappears on the top of the page. I have used fixed toolbar.

Here is part of my code:

JS:

const init = {
inline: inline,
placeholder: placeholder,
toolbar_location: 'top',
fixed_toolbar_container: fixedToolbar && `#${replaceDotsFromName}-editor-toolbar`,
}

JSX:

return (
<>
<Box
sx={{ zIndex: 10000, position: 'relative', top: 0 }}
className='editor-toolbar'
id={`${replaceDotsFromName}-editor-toolbar`}
></Box>
<>

Toolbar works properly if it's not attached to Box element, but then it flows over title. I think this is because sticky toolbar is automatically enabled on inline mode. When it's attached to the Box the toolbar takes it's own space under title, but it does not stay on the view anymore when writing long texts. Is there way to make the toolbar act properly using fixed_toolbar_container?

I have tried to build the editor from the start, but i'm still facing the same issue.