diff --git a/packages/playground/src/shared/image/index.tsx b/packages/playground/src/shared/image/index.tsx
index 9cca1eb..d2a3b1d 100644
--- a/packages/playground/src/shared/image/index.tsx
+++ b/packages/playground/src/shared/image/index.tsx
@@ -5,7 +5,7 @@
 import {getProject, types} from '@theatre/core'
 import studio from '@theatre/studio'
 import React, {useEffect, useState} from 'react'
-import {render} from 'react-dom/client'
+import ReactDom from 'react-dom/client'
 import styled from 'styled-components'
 
 const project = getProject('Image type playground', {
@@ -66,7 +66,9 @@ const ImageTypeExample: React.FC<{}> = (props) => {
 
 project.ready
   .then(() => {
-    render(<ImageTypeExample />, document.getElementById('root'))
+    ReactDom.createRoot(document.getElementById('root')!).render(
+      <ImageTypeExample />,
+    )
   })
   .catch((err) => {
     console.error(err)
diff --git a/packages/playground/src/shared/theatric/index.tsx b/packages/playground/src/shared/theatric/index.tsx
index 210a652..0628178 100644
--- a/packages/playground/src/shared/theatric/index.tsx
+++ b/packages/playground/src/shared/theatric/index.tsx
@@ -1,5 +1,5 @@
 import {button, initialize, types, useControls} from 'theatric'
-import {render} from 'react-dom/client'
+import ReactDom from 'react-dom/client'
 import React, {useState} from 'react'
 import state from './state.json'
 
@@ -79,4 +79,4 @@ function App() {
   )
 }
 
-render(<App />, document.getElementById('root'))
+ReactDom.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/packages/playground/src/shared/turtle/index.tsx b/packages/playground/src/shared/turtle/index.tsx
index a0f3fc1..80de28c 100644
--- a/packages/playground/src/shared/turtle/index.tsx
+++ b/packages/playground/src/shared/turtle/index.tsx
@@ -3,7 +3,7 @@
  * can be tweaked and animated.
  */
 import React, {useMemo, useState} from 'react'
-import {render} from 'react-dom/client'
+import ReactDom from 'react-dom/client'
 import {getProject} from '@theatre/core'
 import type {ITurtle} from './turtle'
 import TurtleRenderer from './TurtleRenderer'
@@ -52,4 +52,4 @@ const TurtleExample: React.FC<{}> = (props) => {
   )
 }
 
-render(<TurtleExample />, document.getElementById('root'))
+ReactDom.createRoot(document.getElementById('root')!).render(<TurtleExample />)
diff --git a/packages/r3f/src/extension/components/OrbitControls/index.tsx b/packages/r3f/src/extension/components/OrbitControls/index.tsx
index fdc8eb1..f0590cf 100644
--- a/packages/r3f/src/extension/components/OrbitControls/index.tsx
+++ b/packages/r3f/src/extension/components/OrbitControls/index.tsx
@@ -65,7 +65,7 @@ export const OrbitControls = forwardRef<OrbitControlsImpl, OrbitControlsProps>(
         if (onChange) onChange(e)
       }
 
-      controls.connect(explDomElement)
+      controls.connect(explDomElement!)
       controls.addEventListener('change', callback)
 
       if (onStart) controls.addEventListener('start', onStart)
diff --git a/theatre/studio/src/UIRoot/PointerCapturing.tsx b/theatre/studio/src/UIRoot/PointerCapturing.tsx
index 07bdbd5..f5d7510 100644
--- a/theatre/studio/src/UIRoot/PointerCapturing.tsx
+++ b/theatre/studio/src/UIRoot/PointerCapturing.tsx
@@ -100,9 +100,9 @@ const PointerCapturingContext = React.createContext<PointerCapturingFn>(
   null as $IntentionalAny,
 )
 
-const ProviderChildrenMemo: React.FC<{}> = React.memo(({children}) => (
-  <>{children}</>
-))
+const ProviderChildrenMemo: React.FC<{children?: React.ReactNode}> = React.memo(
+  ({children}) => <>{children}</>,
+)
 
 /**
  * See {@link PointerCapturing}.
diff --git a/theatre/studio/src/UIRoot/ProvideTheme.tsx b/theatre/studio/src/UIRoot/ProvideTheme.tsx
index a0b37ff..89148ce 100644
--- a/theatre/studio/src/UIRoot/ProvideTheme.tsx
+++ b/theatre/studio/src/UIRoot/ProvideTheme.tsx
@@ -5,7 +5,7 @@ const Container = styled.div`
   --colors-panel-1: red;
 `
 
-const ProvideTheme: React.FC<{}> = (props) => {
+const ProvideTheme: React.FC<{children?: React.ReactNode}> = (props) => {
   return <Container>{props.children}</Container>
 }
 
diff --git a/theatre/studio/src/css.tsx b/theatre/studio/src/css.tsx
index 671650b..de8680c 100644
--- a/theatre/studio/src/css.tsx
+++ b/theatre/studio/src/css.tsx
@@ -81,9 +81,10 @@ export const PortalLayer = styled.div`
   pointer-events: none;
 `
 
-export const ProvideStyles: React.FC<{target: undefined | HTMLElement}> = (
-  props,
-) => {
+export const ProvideStyles: React.FC<{
+  target: undefined | HTMLElement
+  children: React.ReactNode
+}> = (props) => {
   return (
     <StyleSheetManager disableVendorPrefixes target={props.target}>
       <>
@@ -104,7 +105,9 @@ export function withStyledShadow<Props>(
   )
 }
 
-const ProvideStyledShadow: React.FC<{}> = (props) => {
+const ProvideStyledShadow: React.FC<{
+  children: React.ReactNode
+}> = (props) => {
   const [template, ref] = useState<null | HTMLTemplateElement>(null)
   const [shadowRoot, setShadowRoot] = useState<null | ShadowRoot>(null)
 
diff --git a/theatre/studio/src/panels/BasePanel/BasePanel.tsx b/theatre/studio/src/panels/BasePanel/BasePanel.tsx
index cd6852a..d9dcd42 100644
--- a/theatre/studio/src/panels/BasePanel/BasePanel.tsx
+++ b/theatre/studio/src/panels/BasePanel/BasePanel.tsx
@@ -68,6 +68,7 @@ const BasePanel: React.FC<{
   panelId: UIPanelId
   defaultPosition: PanelPosition
   minDims: {width: number; height: number}
+  children: React.ReactNode
 }> = ({panelId, children, defaultPosition, minDims}) => {
   const windowSize = useWindowSize(800, 200)
   const [boundsHighlighted, addBoundsHighlightLock] = useLockSet()
diff --git a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
index 813cd84..c10ab12 100644
--- a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
+++ b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
@@ -27,8 +27,6 @@ const minDims = {width: 300, height: 300}
 const ExtensionPaneWrapper: React.FC<{
   paneInstance: PaneInstance<$FixMe>
 }> = ({paneInstance}) => {
-  console.log(paneInstance)
-
   return (
     <BasePanel
       panelId={`pane-${paneInstance.instanceId}` as UIPanelId}
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index d389f50..1c60a79 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -138,6 +138,7 @@ const BaseItem: React.FC<{
   depth: number
   selectionStatus: SelectionStatus
   labelDecoration?: React.ReactNode
+  children?: React.ReactNode | undefined
   collapsed?: boolean
   setIsCollapsed?: (v: boolean) => void
 }> = ({
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
index 7f9db6f..fc8508e 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
@@ -87,6 +87,7 @@ const AnyCompositeRow: React.FC<{
   isSelected?: boolean
   isSelectable?: boolean
   isCollapsed: boolean
+  children?: React.ReactNode
 }> = ({
   leaf,
   label,
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx
index ca101a1..81cc716 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx
@@ -35,6 +35,7 @@ const Container = styled.div<{isShiftDown: boolean}>`
 const DopeSheetSelectionView: React.FC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
   height: number
+  children: React.ReactNode
 }> = ({layoutP, children, height}) => {
   const [containerRef, containerNode] = useRefAndState<HTMLDivElement | null>(
     null,
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
index c770bb8..a1941a6 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
@@ -34,6 +34,7 @@ const Container = styled.div`
 const HorizontallyScrollableArea: React.FC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
   height: number
+  children: React.ReactNode
 }> = React.memo(({layoutP, children, height}) => {
   const {width, unitSpaceToScaledSpaceMultiplier} = usePrism(
     () => ({
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Row.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Row.tsx
index 3c911b6..12d5989 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Row.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Row.tsx
@@ -51,6 +51,7 @@ const RightRow: React.FC<{
   leaf: SequenceEditorTree_Row<string>
   node: React.ReactElement
   isCollapsed: boolean
+  children?: React.ReactNode | undefined
 }> = ({leaf, children, node, isCollapsed}) => {
   const hasChildren = Array.isArray(children) && children.length > 0
 
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx b/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx
index ca91a9e..56ce56a 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx
@@ -48,6 +48,7 @@ let lastLockId = 0
  */
 const FrameStampPositionProvider: React.FC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
+  children: React.ReactNode
 }> = ({children, layoutP}) => {
   const locksAtom = useMemo(() => new Atom<LockItem[]>([]), [])
   const currentD = useMemo(
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx
index 771303a..1b5326a 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx
@@ -38,7 +38,9 @@ export const useReceiveVerticalWheelEvent = (): ReceiveVerticalWheelEventFn =>
  * the code that traps the wheel events to pass them to the vertical scroller root, which
  * we then use to manually dispatch scroll events.
  */
-const VerticalScrollContainer: React.FC<{}> = (props) => {
+const VerticalScrollContainer: React.FC<{
+  children: React.ReactNode
+}> = (props) => {
   const ref = useRef<HTMLDivElement | null>(null)
   const receiveVerticalWheelEvent = useCallback<ReceiveVerticalWheelEventFn>(
     (event) => {
diff --git a/theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx
index 7724d11..81d0b54 100644
--- a/theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx
+++ b/theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx
@@ -1,4 +1,5 @@
 import type {PropTypeConfig_Image} from '@theatre/core/propTypes'
+import type {$FixMe} from '@theatre/shared/utils/types'
 import {Trash} from '@theatre/studio/uiComponents/icons'
 import React, {useCallback, useEffect} from 'react'
 import styled, {css} from 'styled-components'
@@ -114,7 +115,7 @@ function ImagePropEditor({
   }, [value])
 
   const onChange = useCallback(
-    async (event) => {
+    async (event: React.ChangeEvent<$FixMe>) => {
       const file = event.target.files[0]
       editingTools.permanentlySetValue({type: 'image', id: undefined})
       const imageId = await editingTools.createAsset(file)
diff --git a/theatre/studio/src/toolbars/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar.tsx
index 7ba777e..936cd95 100644
--- a/theatre/studio/src/toolbars/GlobalToolbar.tsx
+++ b/theatre/studio/src/toolbars/GlobalToolbar.tsx
@@ -98,7 +98,9 @@ const GlobalToolbar: React.FC = () => {
             : `There are ${conflicts.length} projects that have state conflicts. They are highlighted in the outline below. `}
         </ErrorTooltip>
       ) : (
-        <BasicTooltip>Outline</BasicTooltip>
+        <BasicTooltip>
+          <>Outline</>
+        </BasicTooltip>
       ),
   )
 
diff --git a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx
index bcc1673..e937144 100644
--- a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx
+++ b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx
@@ -48,6 +48,7 @@ const context = createContext<Context>({} as $IntentionalAny)
 
 const PointerEventsHandler: React.FC<{
   className?: string
+  children?: React.ReactNode
 }> = (props) => {
   const [locks, setLocks] = useState<Lock[]>([])
   const contextValue = useMemo<Context>(() => {
diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx
index f3f8c25..5dcf576 100644
--- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx
+++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx
@@ -34,6 +34,7 @@ const Container = styled.div`
 const BasicPopover: React.FC<{
   className?: string
   showPopoverEdgeTriangle?: boolean
+  children: React.ReactNode
 }> = React.forwardRef(
   (
     {
diff --git a/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx b/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx
index 9cd917d..4777437 100644
--- a/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx
+++ b/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx
@@ -1,4 +1,4 @@
-import type { Prism} from '@theatre/dataverse';
+import type {Prism} from '@theatre/dataverse'
 import {Atom} from '@theatre/dataverse'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import React, {
@@ -39,7 +39,7 @@ export const useTooltipOpenState = (): [
   return [isOpen, setIsOpen]
 }
 
-const TooltipContext: React.FC<{}> = ({children}) => {
+const TooltipContext: React.FC<{children: React.ReactNode}> = ({children}) => {
   const currentTooltipId = useMemo(() => new Atom(-1), [])
   const cur = currentTooltipId.prism
 
diff --git a/theatre/studio/src/uiComponents/colorPicker/components/EditingProvider.tsx b/theatre/studio/src/uiComponents/colorPicker/components/EditingProvider.tsx
index dc08bf9..dc6408f 100644
--- a/theatre/studio/src/uiComponents/colorPicker/components/EditingProvider.tsx
+++ b/theatre/studio/src/uiComponents/colorPicker/components/EditingProvider.tsx
@@ -11,7 +11,9 @@ const editingContext = createContext<{
  * stateful and disregard controlling props, while not editing, it should behave
  * in a controlled manner.
  */
-export const EditingProvider: FC = ({children}) => {
+export const EditingProvider: FC<{children: React.ReactNode}> = ({
+  children,
+}) => {
   const [editing, setEditing] = useState(false)
 
   return (
diff --git a/theatre/studio/src/uiComponents/selects/BasicSelect.tsx b/theatre/studio/src/uiComponents/selects/BasicSelect.tsx
index f4fed80..3477756 100644
--- a/theatre/studio/src/uiComponents/selects/BasicSelect.tsx
+++ b/theatre/studio/src/uiComponents/selects/BasicSelect.tsx
@@ -38,7 +38,9 @@ const BasicSelect: React.FC<{
 
   return (
     <Container>
-      <Label>{props.label}</Label>
+      <Label>
+        <>{props.label}</>
+      </Label>
       <SelectedValueLabel>
         {selectedLabel}
         {/* <select
diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx
index 1951fb4..43c839a 100644
--- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx
+++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx
@@ -46,7 +46,9 @@ const Item: React.FC<{
       enabled={props.enabled}
       title={props.enabled ? undefined : 'Disabled'}
     >
-      <ItemLabel>{props.label}</ItemLabel>
+      <ItemLabel>
+        <>{props.label}</>
+      </ItemLabel>
     </ItemContainer>
   )
 }