Update React to version 18 and other deps (#890)

This PR aims at updating some packages.
I'll keep this in draft until I'll be more happy with the results.
Current setup seems to work, I'll let the CI run and see how bad this
is.
Packages that needs to be updated/replaces:
- [x] ~autocompete - The only warning left in the console is related to
the autocomplete, which probably needs to be updated since it's a
package that wasn't updated in the last 6 years.~ #611
- [x] ~Codemirror is also something that will need an update, but it
looks too complicated at this point in time, so let's see how this
goes.~ #891
- [ ] react-color
- [x] ~react-aria-menubutton~ #846
- [ ] Others?

Most of the changes here are related to types, which is good.

src/components/AppMessagePanel.tsx

@@ -4,7 +4,7 @@ import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
 
 type AppMessagePanelProps = {
   errors?: unknown[]
-  infos?: unknown[]
+  infos?: string[]
   mapStyle?: StyleSpecification
   onLayerSelect?(...args: unknown[]): unknown
   currentLayer?: LayerSpecification

src/components/Block.tsx

@@ -1,10 +1,10 @@
-import React, {SyntheticEvent} from 'react'
+import React, {PropsWithChildren, SyntheticEvent} from 'react'
 import classnames from 'classnames'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
 
-type BlockProps = {
+type BlockProps = PropsWithChildren & {
   "data-wd-key"?: string
   label?: string
   action?: React.ReactElement

src/components/FieldDocLabel.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
 
 type FieldDocLabelProps = {
-  label: object | string | undefined
+  label: JSX.Element | string | undefined
   fieldSpec?: {
     doc?: string
   }

src/components/Fieldset.tsx

@@ -1,9 +1,9 @@
-import React, { ReactElement } from 'react'
+import React, { PropsWithChildren, ReactElement } from 'react'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 import generateUniqueId from '../libs/document-uid';
 
-type FieldsetProps = {
+type FieldsetProps = PropsWithChildren & {
   label?: string,
   fieldSpec?: { doc?: string },
   action?: ReactElement,

src/components/FilterEditorBlock.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
 
-type FilterEditorBlockProps = {
+type FilterEditorBlockProps = PropsWithChildren & {
   onDelete(...args: unknown[]): unknown
 };
 

src/components/LayerListItem.tsx

@@ -139,6 +139,6 @@ class LayerListItem extends React.Component<LayerListItemProps> {
   }
 }
 
-const LayerListItemSortable = SortableElement((props: LayerListItemProps) => <LayerListItem {...props} />);
+const LayerListItemSortable = SortableElement<LayerListItemProps>((props: LayerListItemProps) => <LayerListItem {...props} />);
 
 export default LayerListItemSortable;

src/components/Modal.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
 import classnames from 'classnames';
 
 
-type ModalProps = {
+type ModalProps = PropsWithChildren & {
   "data-wd-key"?: string
   isOpen: boolean
   title: string