diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 9c2923c59cbb7e6e045ca1c6124dd6ffb5bdbca4..2b7f38d0a1edb472f76f368e2af3661cfda01f85 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -6,7 +6,7 @@ import {
 } from '@mui/material';
 import { Alarm, LastPage } from '@mui/icons-material';
 import Typography from '@mui/material/Typography';
-import ToggleButton from '@mui/lab/ToggleButton';
+import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import RectangleIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CircleIcon from '@mui/icons-material/RadioButtonUnchecked';
@@ -503,7 +503,7 @@ class AnnotationCreation extends Component {
                         aria-labelledby="range-slider"
                         max={Math.round(this.state.mediaVideo.video.duration)}
                         color="secondary"
-                        windowId={windowId}
+                        windowid={windowId}
                         sx={{
                           color: 'rgba(1, 0, 0, 0.38)',
                         }}
@@ -798,10 +798,10 @@ const StyledForm = styled('form')(({ theme }) => ({
 }));
 
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
-  '&:first-child': {
+  '&:forst-of-type': {
     borderRadius: theme.shape.borderRadius,
   },
-  '&:not(:first-child)': {
+  '&:not(:first-of-type)': {
     borderRadius: theme.shape.borderRadius,
   },
   border: 'none',
diff --git a/src/CanvasListItem.js b/src/CanvasListItem.js
index ddd839997a0195ef4b7cf381c6eb3c19e11a57e0..97402eba93350643cdd8adb6f724b68f23990b2b 100644
--- a/src/CanvasListItem.js
+++ b/src/CanvasListItem.js
@@ -2,7 +2,7 @@ import React, { Component, createRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import DeleteIcon from '@mui/icons-material/DeleteForever';
 import EditIcon from '@mui/icons-material/Edit';
-import ToggleButton from '@mui/lab/ToggleButton';
+import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import flatten from 'lodash/flatten';
 import AnnotationActionsContext from './AnnotationActionsContext';
diff --git a/src/HMSInput.js b/src/HMSInput.js
index 583f8513f2fd377bff51f767f1d459a61591b72d..bd69395d308d802c556fb76b75a3bafc4e5f117a 100644
--- a/src/HMSInput.js
+++ b/src/HMSInput.js
@@ -7,10 +7,10 @@ const StyledInput = styled(Input)(({ theme }) => ({
   height: 'fit-content',
   margin: '2px',
   '& input[type=number]': {
-    '-moz-appearance': 'textfield',
+    'MozAppearance': 'textfield',
   },
   '& input[type=number]::-webkit-outer-spin-button, & input[type=number]::-webkit-inner-spin-button': {
-    '-webkit-appearance': 'none',
+    'WebkitAppearance': 'none',
     margin: 0,
   },
 }));
@@ -77,7 +77,7 @@ function HMSInput({ seconds, onChange }) {
 
 HMSInput.propTypes = {
   onChange: PropTypes.func.isRequired,
-  seconds: PropTypes.number.isRequired,
+  seconds: PropTypes.number,
 };
 
 export default HMSInput;
diff --git a/src/TextEditor.js b/src/TextEditor.js
index 116de91be9a8d953a97d2f2933caf89efa7c339b..4db66eab52bcca6e219509d9e3447aa8d21e89a3 100644
--- a/src/TextEditor.js
+++ b/src/TextEditor.js
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Editor, EditorState, RichUtils } from 'draft-js';
-import ToggleButton from '@mui/lab/ToggleButton';
+import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import BoldIcon from '@mui/icons-material/FormatBold';
 import ItalicIcon from '@mui/icons-material/FormatItalic';