…-monaco-editor` (elastic#195775)

## Summary

This PR is part of
elastic/kibana-team#1016 (comment)
and needed to upgrade Kibana to React@18 in Legacy mode.

We've found a problem in `react-monaco-editor` component which is a very
thin wrapper around `monaco` where it doesn't play nicely with React@18
in legacy mode. You can read on details around the issue here
elastic/eui#8018 where we've found a similar
issue in EUI's search bar component. The workaround we've found is to
change `useEffect` -> `useLayouEffect` where the value that is coming
from the prop is set into the model. The issue and a fix might be a bit
controversal and the component is very thin, so I decided that it might
be better to bring the fork into Kibana with only what's needed and with
a workaround.

(cherry picked from commit dc3dda7)

…a prop in `react-monaco-editor` (#195775) (#196671)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[React@18] `useLayoutEffect` when setting value from a prop
in `react-monaco-editor`
(#195775)](#195775)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"anton.dosov@elastic.co"},"sourceCommit":{"committedDate":"2024-10-17T11:24:06Z","message":"[React@18]
`useLayoutEffect` when setting value from a prop in
`react-monaco-editor` (#195775)\n\n## Summary\r\n\r\nThis PR is part
of\r\nhttps://github.com/elastic/kibana-team/issues/1016#issuecomment-2399310175\r\nand
needed to upgrade Kibana to React@18 in Legacy mode.\r\n\r\nWe've found
a problem in `react-monaco-editor` component which is a very\r\nthin
wrapper around `monaco` where it doesn't play nicely with React@18\r\nin
legacy mode. You can read on details around the issue
here\r\nhttps://github.com/elastic/eui/issues/8018 where we've found a
similar\r\nissue in EUI's search bar component. The workaround we've
found is to\r\nchange `useEffect` -> `useLayouEffect` where the value
that is coming\r\nfrom the prop is set into the model. The issue and a
fix might be a bit\r\ncontroversal and the component is very thin, so I
decided that it might\r\nbe better to bring the fork into Kibana with
only what's needed and with\r\na
workaround.","sha":"dc3dda7d12662f3d7b5cb6c6c6366e07eae138fa","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor"],"title":"[React@18]
`useLayoutEffect` when setting value from a prop in
`react-monaco-editor`","number":195775,"url":"https://github.com/elastic/kibana/pull/195775","mergeCommit":{"message":"[React@18]
`useLayoutEffect` when setting value from a prop in
`react-monaco-editor` (#195775)\n\n## Summary\r\n\r\nThis PR is part
of\r\nhttps://github.com/elastic/kibana-team/issues/1016#issuecomment-2399310175\r\nand
needed to upgrade Kibana to React@18 in Legacy mode.\r\n\r\nWe've found
a problem in `react-monaco-editor` component which is a very\r\nthin
wrapper around `monaco` where it doesn't play nicely with React@18\r\nin
legacy mode. You can read on details around the issue
here\r\nhttps://github.com/elastic/eui/issues/8018 where we've found a
similar\r\nissue in EUI's search bar component. The workaround we've
found is to\r\nchange `useEffect` -> `useLayouEffect` where the value
that is coming\r\nfrom the prop is set into the model. The issue and a
fix might be a bit\r\ncontroversal and the component is very thin, so I
decided that it might\r\nbe better to bring the fork into Kibana with
only what's needed and with\r\na
workaround.","sha":"dc3dda7d12662f3d7b5cb6c6c6366e07eae138fa"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195775","number":195775,"mergeCommit":{"message":"[React@18]
`useLayoutEffect` when setting value from a prop in
`react-monaco-editor` (#195775)\n\n## Summary\r\n\r\nThis PR is part
of\r\nhttps://github.com/elastic/kibana-team/issues/1016#issuecomment-2399310175\r\nand
needed to upgrade Kibana to React@18 in Legacy mode.\r\n\r\nWe've found
a problem in `react-monaco-editor` component which is a very\r\nthin
wrapper around `monaco` where it doesn't play nicely with React@18\r\nin
legacy mode. You can read on details around the issue
here\r\nhttps://github.com/elastic/eui/issues/8018 where we've found a
similar\r\nissue in EUI's search bar component. The workaround we've
found is to\r\nchange `useEffect` -> `useLayouEffect` where the value
that is coming\r\nfrom the prop is set into the model. The issue and a
fix might be a bit\r\ncontroversal and the component is very thin, so I
decided that it might\r\nbe better to bring the fork into Kibana with
only what's needed and with\r\na
workaround.","sha":"dc3dda7d12662f3d7b5cb6c6c6366e07eae138fa"}}]}]
BACKPORT-->

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>