diff --git a/src/components/LayerEditorGroup.jsx b/src/components/LayerEditorGroup.tsx
similarity index 72%
rename from src/components/LayerEditorGroup.jsx
rename to src/components/LayerEditorGroup.tsx
index 652aba44..888f8d9b 100644
--- a/src/components/LayerEditorGroup.jsx
+++ b/src/components/LayerEditorGroup.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Icon from '@mdi/react'
 import {
   mdiMenuDown,
@@ -13,21 +12,22 @@ import {
 } from 'react-accessible-accordion';
 
 
-export default class LayerEditorGroup extends React.Component {
-  static propTypes = {
-    "id": PropTypes.string,
-    "data-wd-key": PropTypes.string,
-    title: PropTypes.string.isRequired,
-    isActive: PropTypes.bool.isRequired,
-    children: PropTypes.element.isRequired,
-    onActiveToggle: PropTypes.func.isRequired
-  }
+type LayerEditorGroupProps = {
+  "id"?: string
+  "data-wd-key"?: string
+  title: string
+  isActive: boolean
+  children: React.ReactElement
+  onActiveToggle(...args: unknown[]): unknown
+};
 
+
+export default class LayerEditorGroup extends React.Component<LayerEditorGroupProps> {
   render() {
     return <AccordionItem uuid={this.props.id}>
       <AccordionItemHeading className="maputnik-layer-editor-group"
         data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
-        onClick={e => this.props.onActiveToggle(!this.props.isActive)}
+        onClick={_e => this.props.onActiveToggle(!this.props.isActive)}
       >
         <AccordionItemButton className="maputnik-layer-editor-group__button">
           <span style={{flexGrow: 1}}>{this.props.title}</span>
diff --git a/src/components/LayerListGroup.jsx b/src/components/LayerListGroup.tsx
similarity index 63%
rename from src/components/LayerListGroup.jsx
rename to src/components/LayerListGroup.tsx
index 9d62f075..b362b8ea 100644
--- a/src/components/LayerListGroup.jsx
+++ b/src/components/LayerListGroup.tsx
@@ -1,21 +1,20 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Collapser from './Collapser'
 
-export default class LayerListGroup extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    "data-wd-key": PropTypes.string,
-    isActive: PropTypes.bool.isRequired,
-    onActiveToggle: PropTypes.func.isRequired,
-    'aria-controls': PropTypes.string,
-  }
+type LayerListGroupProps = {
+  title: string
+  "data-wd-key"?: string
+  isActive: boolean
+  onActiveToggle(...args: unknown[]): unknown
+  'aria-controls'?: string
+};
 
+export default class LayerListGroup extends React.Component<LayerListGroupProps> {
   render() {
     return <li className="maputnik-layer-list-group">
       <div className="maputnik-layer-list-group-header"
         data-wd-key={"layer-list-group:"+this.props["data-wd-key"]}
-        onClick={e => this.props.onActiveToggle(!this.props.isActive)}
+        onClick={_e => this.props.onActiveToggle(!this.props.isActive)}
       >
         <button
           className="maputnik-layer-list-group-title"