diff --git a/src/app.js b/src/app.js
index cdcc342d..d1ea00fd 100644
--- a/src/app.js
+++ b/src/app.js
@@ -14,7 +14,7 @@ import { Acknowledgements } from "@components/acknowledgements";
 /**
  * renders the main content
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 const Content = () => {
@@ -51,7 +51,7 @@ const Content = () => {
 /**
  * renders the application
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 export const App = () => {
diff --git a/src/components/compare-panel/compare-panel.js b/src/components/compare-panel/compare-panel.js
index b860913e..4f25a922 100644
--- a/src/components/compare-panel/compare-panel.js
+++ b/src/components/compare-panel/compare-panel.js
@@ -9,7 +9,7 @@ import Draggable from "react-draggable";
 /**
  * renders the compare mode selections.
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 export const ComparePanel = () => {
diff --git a/src/components/config/config.js b/src/components/config/config.js
index b0af10d1..0e5b0314 100644
--- a/src/components/config/config.js
+++ b/src/components/config/config.js
@@ -30,7 +30,7 @@ export const getDefaultInstanceName = () => {
 /**
  * handles getting the default instance name
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 export const Config = () => {
diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js
index e5e12cd2..b7ad6855 100644
--- a/src/components/dialog/base-floating-dialog.js
+++ b/src/components/dialog/base-floating-dialog.js
@@ -29,7 +29,7 @@ BaseFloatingDialog.propTypes = {
  *
  * @param title - the name of the dialog: string
  * @param index - the index of the data
- * @param dialogObject the object to render in the dialog: {JSX.Element}
+ * @param dialogObject the object to render in the dialog: React.ReactElement
  * @param dataKey - the key to the data list elements in state: string
  * @param dataList - a data list in state: array
  * @param setDataList - method to update a data list in state: function
diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
index 0abaa23c..3c1c76d5 100644
--- a/src/components/dialog/observation-chart.js
+++ b/src/components/dialog/observation-chart.js
@@ -17,7 +17,7 @@ dayjs.extend(utc);
  * renders the observations as a chart
  *
  * @param dataUrl
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 export default function ObservationChart(chartProps) {
@@ -280,7 +280,7 @@ function get_yaxis_ticks(data) {
  * Creates the chart.
  *
  * @param url
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 function CreateObsChart(c) {
diff --git a/src/components/dialog/observation-dialog.js b/src/components/dialog/observation-dialog.js
index edd43d64..b6f9e349 100644
--- a/src/components/dialog/observation-dialog.js
+++ b/src/components/dialog/observation-dialog.js
@@ -7,7 +7,7 @@ import ObservationChart from "@dialog/observation-chart";
  * This component renders the observation dialog, including the chart
  *
  * @param obs_data
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const ObservationDialog = (obs_data) => {
diff --git a/src/components/trays/compare-layers/CompareLayersTray.js b/src/components/trays/compare-layers/CompareLayersTray.js
index 1f208b34..f6da5d9b 100644
--- a/src/components/trays/compare-layers/CompareLayersTray.js
+++ b/src/components/trays/compare-layers/CompareLayersTray.js
@@ -35,7 +35,7 @@ const getModelRunGroupList = (layers) => {
 /**
  * This component renders the model selection tray
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 export const CompareLayersTray = () => {
diff --git a/src/components/trays/compare-layers/compare-layers.js b/src/components/trays/compare-layers/compare-layers.js
index b5808b1a..87bb9840 100644
--- a/src/components/trays/compare-layers/compare-layers.js
+++ b/src/components/trays/compare-layers/compare-layers.js
@@ -4,7 +4,7 @@ import { CompareLayersTray } from "@compare-layers/CompareLayersTray.js";
 /**
  * component that handles the comparison of layers on the map.
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const CompareLayers = () => {
diff --git a/src/components/trays/compare-layers/index.js b/src/components/trays/compare-layers/index.js
index a516d687..b034c297 100644
--- a/src/components/trays/compare-layers/index.js
+++ b/src/components/trays/compare-layers/index.js
@@ -14,7 +14,7 @@ export const title = 'Compare Layers';
 /**
  * render the model selection component
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  */
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
diff --git a/src/components/trays/help-about/helpAboutTray.js b/src/components/trays/help-about/helpAboutTray.js
index 2e0dab73..c30216c4 100644
--- a/src/components/trays/help-about/helpAboutTray.js
+++ b/src/components/trays/help-about/helpAboutTray.js
@@ -22,7 +22,7 @@ import SvgIcon from '@mui/material/SvgIcon';
  *
  * @param color
  * @param name
- * @returns JSX.Element
+ * @returns React.ReactElement
  */
 const getObsSVGIcon = ( color, name ) => {
     return (
@@ -44,7 +44,7 @@ const getObsSVGIcon = ( color, name ) => {
 /**
  * This component renders the help/about tray
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 export const HelpAboutTray = () => {
diff --git a/src/components/trays/help-about/help_about.js b/src/components/trays/help-about/help_about.js
index 4a70dece..4741d7a3 100644
--- a/src/components/trays/help-about/help_about.js
+++ b/src/components/trays/help-about/help_about.js
@@ -4,7 +4,7 @@ import { HelpAboutTray } from "./helpAboutTray.js";
 /**
  * component that renders the help/about tray.
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const HelpAbout = () => {
diff --git a/src/components/trays/help-about/index.js b/src/components/trays/help-about/index.js
index 84955d56..73b1b44b 100644
--- a/src/components/trays/help-about/index.js
+++ b/src/components/trays/help-about/index.js
@@ -14,7 +14,7 @@ export const title = 'APSViz Help/About';
 /**
  * render the removal component
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  */
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js
index 74e0d192..b8437f5e 100644
--- a/src/components/trays/layers/list.js
+++ b/src/components/trays/layers/list.js
@@ -106,7 +106,7 @@ const newLayerDefaultState = (layer, group) => {
 /**
  * render the layers for the selected run groups
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const LayersList = () => {
diff --git a/src/components/trays/model-selection/index.js b/src/components/trays/model-selection/index.js
index 57051e58..2ecbd1c1 100644
--- a/src/components/trays/model-selection/index.js
+++ b/src/components/trays/model-selection/index.js
@@ -14,7 +14,7 @@ export const title = 'ADCIRC Model selection';
 /**
  * render the model selection component
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  */
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
diff --git a/src/components/trays/model-selection/model-selection.js b/src/components/trays/model-selection/model-selection.js
index f706a653..ca4d8c7d 100644
--- a/src/components/trays/model-selection/model-selection.js
+++ b/src/components/trays/model-selection/model-selection.js
@@ -4,7 +4,7 @@ import { ModelSelectionTray } from "@model-selection/modelSelectionTray.js";
 /**
  * component that handles the filtered selections of layers for the map.
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const ModelSelection = () => {
diff --git a/src/components/trays/model-selection/modelSelectionTray.js b/src/components/trays/model-selection/modelSelectionTray.js
index ceacb287..b6dd2692 100644
--- a/src/components/trays/model-selection/modelSelectionTray.js
+++ b/src/components/trays/model-selection/modelSelectionTray.js
@@ -6,7 +6,7 @@ import {TropicalTabForm} from "@model-selection/tropicalTab";
 /**
  * This component renders the model selection tray
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const ModelSelectionTray = () => {
diff --git a/src/components/trays/model-selection/synopticTab.js b/src/components/trays/model-selection/synopticTab.js
index 6a5e0a93..6cb1317c 100644
--- a/src/components/trays/model-selection/synopticTab.js
+++ b/src/components/trays/model-selection/synopticTab.js
@@ -13,7 +13,7 @@ import dayjs from 'dayjs';
 /**
  * Form to filter/select synoptic runs
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 export const SynopticTabForm = () => {
diff --git a/src/components/trays/model-selection/tropicalTab.js b/src/components/trays/model-selection/tropicalTab.js
index 2ab1dd8a..1479d36b 100644
--- a/src/components/trays/model-selection/tropicalTab.js
+++ b/src/components/trays/model-selection/tropicalTab.js
@@ -9,7 +9,7 @@ import { getNamespacedEnvParam, getBrandingHandler } from "@utils/map-utils";
 /**
  * Form to filter/selt tropical runs
  *
- * @returns JSX.Element
+ * @returns React.ReactElement
  * @constructor
  */
 export const TropicalTabForm = () => {
diff --git a/src/components/trays/remove/index.js b/src/components/trays/remove/index.js
index 2c721b38..d0b42de3 100644
--- a/src/components/trays/remove/index.js
+++ b/src/components/trays/remove/index.js
@@ -17,7 +17,7 @@ export const title = 'Remove items';
 /**
  * render the tray
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  */
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
diff --git a/src/components/trays/remove/remove-models.js b/src/components/trays/remove/remove-models.js
index aa34c69c..6203b55d 100644
--- a/src/components/trays/remove/remove-models.js
+++ b/src/components/trays/remove/remove-models.js
@@ -5,7 +5,7 @@ import { useLayers } from "@context";
 /**
  * component that handles the removal of all model runs.
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const RemoveModels = () => {
diff --git a/src/components/trays/remove/remove-observations.js b/src/components/trays/remove/remove-observations.js
index 6004fbc7..ed81f8dc 100644
--- a/src/components/trays/remove/remove-observations.js
+++ b/src/components/trays/remove/remove-observations.js
@@ -5,7 +5,7 @@ import { useLayers } from "@context";
 /**
  * component that handles the removal of observations.
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const RemoveAllObservations = () => {
diff --git a/src/components/trays/remove/reset-compare.js b/src/components/trays/remove/reset-compare.js
index 00b40c36..a2986019 100644
--- a/src/components/trays/remove/reset-compare.js
+++ b/src/components/trays/remove/reset-compare.js
@@ -6,7 +6,7 @@ import { useLayers } from "@context";
  * component that handles the removal of styles from
  * local storage ADCIRC raster layers
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const ResetCompare = () => {
diff --git a/src/components/trays/remove/reset-styles.js b/src/components/trays/remove/reset-styles.js
index a6028146..b251f705 100644
--- a/src/components/trays/remove/reset-styles.js
+++ b/src/components/trays/remove/reset-styles.js
@@ -5,7 +5,7 @@ import { Button } from '@mui/joy';
  * component that handles the removal of styles from
  * local storage ADCIRC raster layers
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const ResetStyles = () => {
diff --git a/src/components/trays/settings/chart-yaxis.js b/src/components/trays/settings/chart-yaxis.js
index 18c914c4..3d12d5e6 100644
--- a/src/components/trays/settings/chart-yaxis.js
+++ b/src/components/trays/settings/chart-yaxis.js
@@ -6,7 +6,7 @@ import LineAxisRoundedIcon from '@mui/icons-material/LineAxisRounded';
 /**
  * renders the observation chart Y-axis slider
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const ObsChartYAxis = () => {
@@ -63,7 +63,7 @@ export const ObsChartYAxis = () => {
 /**
  * renders the icon
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const YAxisSlider = () => {
diff --git a/src/components/trays/share/index.js b/src/components/trays/share/index.js
index 96898e4c..27566248 100644
--- a/src/components/trays/share/index.js
+++ b/src/components/trays/share/index.js
@@ -16,7 +16,7 @@ export const title = 'Share your view';
 /**
  * render the removal component
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  */
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
diff --git a/src/components/trays/share/share-comment.js b/src/components/trays/share/share-comment.js
index 2dcb1bc4..52394c18 100644
--- a/src/components/trays/share/share-comment.js
+++ b/src/components/trays/share/share-comment.js
@@ -7,7 +7,7 @@ import { useLayers } from "@context";
 /**
  * renders the shared content on the app as defined in the query string
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const ShareComment = () => {
diff --git a/src/components/trays/share/shareViewTray.js b/src/components/trays/share/shareViewTray.js
index 17dc5372..d7472c16 100644
--- a/src/components/trays/share/shareViewTray.js
+++ b/src/components/trays/share/shareViewTray.js
@@ -6,7 +6,7 @@ import { ShareComment } from "@share/share-comment";
 /**
  * renders the shared content on the app as defined in the query string
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const ShareViewTray = () => {
diff --git a/src/components/trays/share/share_view.js b/src/components/trays/share/share_view.js
index b5fcd9f4..8364d800 100644
--- a/src/components/trays/share/share_view.js
+++ b/src/components/trays/share/share_view.js
@@ -4,7 +4,7 @@ import { ShareViewTray } from "@share/shareViewTray.js";
 /**
  * component that handles the filtered selections of layers for the map.
  *
- * @returns {JSX.Element}
+ * @returns React.ReactElement
  * @constructor
  */
 export const ShareView = () => {
diff --git a/src/context/map-context.js b/src/context/map-context.js
index 48a3f576..a09542f2 100644
--- a/src/context/map-context.js
+++ b/src/context/map-context.js
@@ -92,7 +92,7 @@ export const LayersProvider = ({ children }) => {
    * get the layer icon
    *
    * @param productType
-   * @returns JSX.Element
+   * @returns React.ReactElement
    */
   const getLayerIcon = ( productType )=> {
       // grab the icon