diff --git a/packages/react-json-tree/src/ItemRange.tsx b/packages/react-json-tree/src/ItemRange.tsx
index 7eb1cb03..b35b5390 100644
--- a/packages/react-json-tree/src/ItemRange.tsx
+++ b/packages/react-json-tree/src/ItemRange.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import JSONArrow from './JSONArrow';
 import type { CircularCache, CommonInternalProps } from './types';
 
@@ -9,43 +9,31 @@ interface Props extends CommonInternalProps {
   to: number;
   renderChildNodes: (props: Props, from: number, to: number) => React.ReactNode;
   circularCache: CircularCache;
+  level: number;
 }
 
-interface State {
-  expanded: boolean;
-}
-
-export default class ItemRange extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { expanded: false };
-  }
-
-  render() {
-    const { styling, from, to, renderChildNodes, nodeType } = this.props;
-
-    return this.state.expanded ? (
-      <div {...styling('itemRange', this.state.expanded)}>
-        {renderChildNodes(this.props, from, to)}
-      </div>
-    ) : (
-      <div
-        {...styling('itemRange', this.state.expanded)}
-        onClick={this.handleClick}
-      >
-        <JSONArrow
-          nodeType={nodeType}
-          styling={styling}
-          expanded={false}
-          onClick={this.handleClick}
-          arrowStyle="double"
-        />
-        {`${from} ... ${to}`}
-      </div>
-    );
-  }
-
-  handleClick = () => {
-    this.setState({ expanded: !this.state.expanded });
-  };
+export default function ItemRange(props: Props) {
+  const { styling, from, to, renderChildNodes, nodeType } = props;
+
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const handleClick = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded]);
+
+  return expanded ? (
+    <div {...styling('itemRange', expanded)}>
+      {renderChildNodes(props, from, to)}
+    </div>
+  ) : (
+    <div {...styling('itemRange', expanded)} onClick={handleClick}>
+      <JSONArrow
+        nodeType={nodeType}
+        styling={styling}
+        expanded={false}
+        onClick={handleClick}
+        arrowStyle="double"
+      />
+      {`${from} ... ${to}`}
+    </div>
+  );
 }
diff --git a/packages/react-json-tree/src/JSONArrayNode.tsx b/packages/react-json-tree/src/JSONArrayNode.tsx
index eadf3a6c..bd73d643 100644
--- a/packages/react-json-tree/src/JSONArrayNode.tsx
+++ b/packages/react-json-tree/src/JSONArrayNode.tsx
@@ -16,15 +16,15 @@ interface Props extends CommonInternalProps {
 }
 
 // Configures <JSONNestedNode> to render an Array
-const JSONArrayNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
-  <JSONNestedNode
-    {...props}
-    data={data}
-    nodeType="Array"
-    nodeTypeIndicator="[]"
-    createItemString={createItemString}
-    expandable={data.length > 0}
-  />
-);
-
-export default JSONArrayNode;
+export default function JSONArrayNode({ data, ...props }: Props) {
+  return (
+    <JSONNestedNode
+      {...props}
+      data={data}
+      nodeType="Array"
+      nodeTypeIndicator="[]"
+      createItemString={createItemString}
+      expandable={data.length > 0}
+    />
+  );
+}
diff --git a/packages/react-json-tree/src/JSONArrow.tsx b/packages/react-json-tree/src/JSONArrow.tsx
index 8caa2a9a..e00fe456 100644
--- a/packages/react-json-tree/src/JSONArrow.tsx
+++ b/packages/react-json-tree/src/JSONArrow.tsx
@@ -9,21 +9,21 @@ interface Props {
   onClick: React.MouseEventHandler<HTMLDivElement>;
 }
 
-const JSONArrow: React.FunctionComponent<Props> = ({
+export default function JSONArrow({
   styling,
   arrowStyle = 'single',
   expanded,
   nodeType,
   onClick,
-}) => (
-  <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
-    <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
-      {'\u25B6'}
-      {arrowStyle === 'double' && (
-        <div {...styling(['arrowSign', 'arrowSignInner'])}>{'\u25B6'}</div>
-      )}
+}: Props) {
+  return (
+    <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
+      <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
+        {'\u25B6'}
+        {arrowStyle === 'double' && (
+          <div {...styling(['arrowSign', 'arrowSignInner'])}>{'\u25B6'}</div>
+        )}
+      </div>
     </div>
-  </div>
-);
-
-export default JSONArrow;
+  );
+}
diff --git a/packages/react-json-tree/src/JSONIterableNode.tsx b/packages/react-json-tree/src/JSONIterableNode.tsx
index ad24d5f5..ca8dc454 100644
--- a/packages/react-json-tree/src/JSONIterableNode.tsx
+++ b/packages/react-json-tree/src/JSONIterableNode.tsx
@@ -28,7 +28,7 @@ interface Props extends CommonInternalProps {
 }
 
 // Configures <JSONNestedNode> to render an iterable
-const JSONIterableNode: React.FunctionComponent<Props> = ({ ...props }) => {
+export default function JSONIterableNode(props: Props) {
   return (
     <JSONNestedNode
       {...props}
@@ -38,6 +38,4 @@ const JSONIterableNode: React.FunctionComponent<Props> = ({ ...props }) => {
       expandable
     />
   );
-};
-
-export default JSONIterableNode;
+}
diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx
index 7f47f8db..d83bf4cf 100644
--- a/packages/react-json-tree/src/JSONNestedNode.tsx
+++ b/packages/react-json-tree/src/JSONNestedNode.tsx
@@ -13,6 +13,7 @@ export interface RenderChildNodesProps extends CommonInternalProps {
   data: any;
   nodeType: string;
   circularCache: CircularCache;
+  level: number;
 }
 
 interface Range {
diff --git a/packages/react-json-tree/src/JSONNode.tsx b/packages/react-json-tree/src/JSONNode.tsx
index ccde86d6..a0292d66 100644
--- a/packages/react-json-tree/src/JSONNode.tsx
+++ b/packages/react-json-tree/src/JSONNode.tsx
@@ -8,10 +8,9 @@ import type { CommonInternalProps } from './types';
 
 interface Props extends CommonInternalProps {
   value: any;
-  isCustomNode: (value: any) => boolean;
 }
 
-const JSONNode: React.FunctionComponent<Props> = ({
+export default function JSONNode({
   getItemString,
   keyPath,
   labelRenderer,
@@ -20,7 +19,7 @@ const JSONNode: React.FunctionComponent<Props> = ({
   valueRenderer,
   isCustomNode,
   ...rest
-}) => {
+}: Props) {
   const nodeType = isCustomNode(value) ? 'Custom' : objType(value);
 
   const simpleNodeProps = {
@@ -100,6 +99,4 @@ const JSONNode: React.FunctionComponent<Props> = ({
         />
       );
   }
-};
-
-export default JSONNode;
+}
diff --git a/packages/react-json-tree/src/JSONObjectNode.tsx b/packages/react-json-tree/src/JSONObjectNode.tsx
index 7d1e10a1..211ef7ea 100644
--- a/packages/react-json-tree/src/JSONObjectNode.tsx
+++ b/packages/react-json-tree/src/JSONObjectNode.tsx
@@ -15,15 +15,15 @@ interface Props extends CommonInternalProps {
 }
 
 // Configures <JSONNestedNode> to render an Object
-const JSONObjectNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
-  <JSONNestedNode
-    {...props}
-    data={data}
-    nodeType="Object"
-    nodeTypeIndicator={props.nodeType === 'Error' ? 'Error()' : '{}'}
-    createItemString={createItemString}
-    expandable={Object.getOwnPropertyNames(data).length > 0}
-  />
-);
-
-export default JSONObjectNode;
+export default function JSONObjectNode({ data, ...props }: Props) {
+  return (
+    <JSONNestedNode
+      {...props}
+      data={data}
+      nodeType="Object"
+      nodeTypeIndicator={props.nodeType === 'Error' ? 'Error()' : '{}'}
+      createItemString={createItemString}
+      expandable={Object.getOwnPropertyNames(data).length > 0}
+    />
+  );
+}
diff --git a/packages/react-json-tree/src/JSONValueNode.tsx b/packages/react-json-tree/src/JSONValueNode.tsx
index c20910de..d25132a3 100644
--- a/packages/react-json-tree/src/JSONValueNode.tsx
+++ b/packages/react-json-tree/src/JSONValueNode.tsx
@@ -24,7 +24,7 @@ interface Props {
   valueGetter?: (value: any) => any;
 }
 
-const JSONValueNode: React.FunctionComponent<Props> = ({
+export default function JSONValueNode({
   nodeType,
   styling,
   labelRenderer,
@@ -32,15 +32,15 @@ const JSONValueNode: React.FunctionComponent<Props> = ({
   valueRenderer,
   value,
   valueGetter = (value) => value,
-}) => (
-  <li {...styling('value', nodeType, keyPath)}>
-    <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
-      {labelRenderer(keyPath, nodeType, false, false)}
-    </label>
-    <span {...styling('valueText', nodeType, keyPath)}>
-      {valueRenderer(valueGetter(value), value, ...keyPath)}
-    </span>
-  </li>
-);
-
-export default JSONValueNode;
+}: Props) {
+  return (
+    <li {...styling('value', nodeType, keyPath)}>
+      <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
+        {labelRenderer(keyPath, nodeType, false, false)}
+      </label>
+      <span {...styling('valueText', nodeType, keyPath)}>
+        {valueRenderer(valueGetter(value), value, ...keyPath)}
+      </span>
+    </li>
+  );
+}
diff --git a/packages/react-json-tree/src/createStylingFromTheme.ts b/packages/react-json-tree/src/createStylingFromTheme.ts
index 2306b91c..5c776c7e 100644
--- a/packages/react-json-tree/src/createStylingFromTheme.ts
+++ b/packages/react-json-tree/src/createStylingFromTheme.ts
@@ -1,11 +1,12 @@
 import type { CurriedFunction1 } from 'lodash';
-import {
+import { createStyling } from 'react-base16-styling';
+import type {
   Base16Theme,
-  createStyling,
   StylingConfig,
+  StylingFunction,
+  Theme,
 } from 'react-base16-styling';
 import solarized from './themes/solarized';
-import { StylingFunction, Theme } from 'react-base16-styling/src';
 
 const colorMap = (theme: Base16Theme) => ({
   BACKGROUND_COLOR: theme.base00,
diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx
index 286ec76f..a732c37d 100644
--- a/packages/react-json-tree/src/index.tsx
+++ b/packages/react-json-tree/src/index.tsx
@@ -74,4 +74,4 @@ export function JSONTree({
   );
 }
 
-export { StylingValue };
+export type { StylingValue };
diff --git a/packages/react-json-tree/src/types.ts b/packages/react-json-tree/src/types.ts
index bcccc597..412af62e 100644
--- a/packages/react-json-tree/src/types.ts
+++ b/packages/react-json-tree/src/types.ts
@@ -58,6 +58,6 @@ export interface CommonExternalProps {
 export interface CommonInternalProps extends CommonExternalProps {
   styling: StylingFunction;
   circularCache?: CircularCache;
-  isCircular?: boolean;
   level?: number;
+  isCircular?: boolean;
 }