making the component name/params more understandable.

src/app.js

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
 import { Map } from '@components/map';
-import FloatingDialog from '@utils/dialog-utils';
+import BaseFloatingDialog from "@utils/dialog-utils";
 // import SubObj from "@utils/subObj";
 
 export const App = () => {
   return (
     <Fragment>
-        <FloatingDialog title={"A title"} dialogText={"the dialog text"} openDialog={true}/>
+        <BaseFloatingDialog title={"A title"} dialogText={"the dialog text"} openDialogImmediately={true}/>
         <Map />
      </Fragment>
   );

src/utils/dialog-utils.js

@@ -42,8 +42,8 @@ const Transition = React.forwardRef(function Transition(props, ref) {
  * @returns {JSX.Element}
  * @constructor
  */
-export default function FloatingDialog({ title, dialogText, openDialog}) { //, dialogObject
-  const [open, setOpen] = React.useState(openDialog);
+export default function BaseFloatingDialog({ title, dialogText, openDialogImmediately} ) { //, dialogObject
+  const [open, setOpen] = React.useState(openDialogImmediately);
 
   // closes the dialog
   const handleClose = () => {
@@ -79,9 +79,9 @@ export default function FloatingDialog({ title, dialogText, openDialog}) { //, d
 };
 
 // define the properties of this component
-FloatingDialog.propTypes = {
+BaseFloatingDialog.propTypes = {
   title: PropTypes.string,
   dialogText: PropTypes.string,
-  openDialog: PropTypes.bool
+  openDialogImmediately: PropTypes.bool
   // dialogObject: PropTypes.any
 };