diff --git a/package.json b/package.json
index 1caef8e9a..0507e93af 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
         "mermaid": "8.8.4",
         "node-sass": "4.14.1",
         "react": "17.0.1",
-        "react-bootstrap": "1.4.0",
+        "react-bootstrap": "1.4.3",
         "react-bootstrap-typeahead": "5.1.4",
         "react-codemirror2": "7.2.1",
         "react-diff-viewer": "3.1.1",
diff --git a/src/components/editor/app-bar/dark-mode-button.tsx b/src/components/editor/app-bar/dark-mode-button.tsx
index f8d09ac54..0b1be3243 100644
--- a/src/components/editor/app-bar/dark-mode-button.tsx
+++ b/src/components/editor/app-bar/dark-mode-button.tsx
@@ -11,9 +11,14 @@ import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-a
 import { setDarkMode } from '../../../redux/dark-mode/methods'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 
+enum DarkModeState {
+  DARK,
+  LIGHT
+}
+
 const DarkModeButton: React.FC = () => {
   const { t } = useTranslation()
-  const darkModeEnabled = useIsDarkModeActivated()
+  const darkModeEnabled = useIsDarkModeActivated() ? DarkModeState.DARK : DarkModeState.LIGHT
 
   return (
     <ToggleButtonGroup
@@ -21,13 +26,21 @@ const DarkModeButton: React.FC = () => {
       name="dark-mode"
       value={darkModeEnabled}
       className="ml-2"
-      onChange={(value: boolean) => {
-        setDarkMode(value)
-      }}>
-      <ToggleButton value={true} variant="outline-secondary" title={t('editor.darkMode.switchToDark')}>
+    >
+      <ToggleButton
+        value={DarkModeState.DARK}
+        variant="outline-secondary"
+        title={t('editor.darkMode.switchToDark')}
+        onChange={() => setDarkMode(true)}
+      >
         <ForkAwesomeIcon icon="moon"/>
       </ToggleButton>
-      <ToggleButton value={false} variant="outline-secondary" title={t('editor.darkMode.switchToLight')}>
+      <ToggleButton
+        value={DarkModeState.LIGHT}
+        variant="outline-secondary"
+        title={t('editor.darkMode.switchToLight')}
+        onChange={() => setDarkMode(false)}
+      >
         <ForkAwesomeIcon icon="sun-o"/>
       </ToggleButton>
     </ToggleButtonGroup>
diff --git a/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx b/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx
index 39ccc1166..28a60c34a 100644
--- a/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx
+++ b/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx
@@ -14,24 +14,31 @@ import { ReactComponent as DisabledScrollIcon } from './disabledScroll.svg'
 import { ReactComponent as EnabledScrollIcon } from './enabledScroll.svg'
 import './sync-scroll-buttons.scss'
 
+enum SyncScrollState {
+  SYNCED,
+  UNSYNCED
+}
+
 export const SyncScrollButtons: React.FC = () => {
-  const syncScroll: boolean = useSelector((state: ApplicationState) => state.editorConfig.syncScroll)
+  const syncScrollEnabled = useSelector((state: ApplicationState) => state.editorConfig.syncScroll) ? SyncScrollState.SYNCED : SyncScrollState.UNSYNCED
   const { t } = useTranslation()
 
   return (
     <ToggleButtonGroup type="radio" defaultValue={[]} name="sync-scroll" className={'ml-2 sync-scroll-buttons'}
-      value={[syncScroll]}>
+      value={syncScrollEnabled}>
       <ToggleButton
         variant={'outline-secondary'}
         title={t('editor.appBar.syncScroll.enable')}
-        onChange={() => setEditorSyncScroll(true)} value={true}
+        onChange={() => setEditorSyncScroll(true)}
+        value={SyncScrollState.SYNCED}
       >
         <EnabledScrollIcon/>
       </ToggleButton>
       <ToggleButton
         variant={'outline-secondary'}
         title={t('editor.appBar.syncScroll.disable')}
-        onChange={() => setEditorSyncScroll(false)} value={false}
+        onChange={() => setEditorSyncScroll(false)}
+        value={SyncScrollState.UNSYNCED}
       >
         <DisabledScrollIcon/>
       </ToggleButton>
diff --git a/yarn.lock b/yarn.lock
index f71382a39..3f8cfe3b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2394,7 +2394,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.0":
+"@types/react@*", "@types/react@17.0.0", "@types/react@>=16.9.35":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
   integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
@@ -2402,7 +2402,7 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@^16.9.11", "@types/react@^16.9.35":
+"@types/react@^16.9.11":
   version "16.14.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"
   integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==
@@ -11808,10 +11808,10 @@ react-bootstrap-typeahead@5.1.4:
     scroll-into-view-if-needed "^2.2.20"
     warning "^4.0.1"
 
-react-bootstrap@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-1.4.0.tgz#806a8b48b065cedfb28c6c5c7b0c0e3c3b53445d"
-  integrity sha512-0BMzgeUAxH126v7VYDzIXbHxQVHSnniPVKpz9fblumdQpWaiElMnnzk+u8h8DoELX0nCXwPlcUzgXqmpncdc2Q==
+react-bootstrap@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-1.4.3.tgz#9a76a66800b57f422dd824c9dbe4c9dcef634790"
+  integrity sha512-4tYhk26KRnK0myMEp2wvNjOvnHMwWfa6pWFIiCtj9wewYaTxP7TrCf7MwcIMBgUzyX0SJXx6UbbDG0+hObiXNg==
   dependencies:
     "@babel/runtime" "^7.4.2"
     "@restart/context" "^2.1.4"
@@ -11819,7 +11819,7 @@ react-bootstrap@1.4.0:
     "@types/classnames" "^2.2.10"
     "@types/invariant" "^2.2.33"
     "@types/prop-types" "^15.7.3"
-    "@types/react" "^16.9.35"
+    "@types/react" ">=16.9.35"
     "@types/react-transition-group" "^4.4.0"
     "@types/warning" "^3.0.0"
     classnames "^2.2.6"