diff --git a/demo/scripts/components/BufferContentGraph.tsx b/demo/scripts/components/BufferContentGraph.tsx
index fc120bf25f..bae14e34ce 100644
--- a/demo/scripts/components/BufferContentGraph.tsx
+++ b/demo/scripts/components/BufferContentGraph.tsx
@@ -121,7 +121,7 @@ export default function BufferContentGraph({
   maximumPosition: number | null | undefined;
   seek: (pos: number) => void;
   type: "audio" | "video" | "text";
-}>): JSX.Element {
+}>): React.JSX.Element {
   const randomColors = useMemo<string[]>(() => shuffleArray(COLORS), []);
   const [tipVisible, setTipVisible] = useState(false);
   const [tipPosition, setTipPosition] = useState(0);
diff --git a/demo/scripts/components/Button.tsx b/demo/scripts/components/Button.tsx
index e71fa69c08..e7d0eab01c 100644
--- a/demo/scripts/components/Button.tsx
+++ b/demo/scripts/components/Button.tsx
@@ -19,7 +19,7 @@ function Button({
   value: string;
   disabled: boolean;
   title?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   if (disabled) {
     return (
       <button
diff --git a/demo/scripts/components/CheckBox.tsx b/demo/scripts/components/CheckBox.tsx
index 104d264de7..fe7b76674d 100644
--- a/demo/scripts/components/CheckBox.tsx
+++ b/demo/scripts/components/CheckBox.tsx
@@ -17,7 +17,7 @@ function Checkbox({
   name: string;
   checked: boolean;
   children?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const onInputChange = React.useCallback(
     (evt: React.ChangeEvent<HTMLInputElement>) => {
       onChange(getCheckBoxValue(evt.target));
diff --git a/demo/scripts/components/FocusedInput.tsx b/demo/scripts/components/FocusedInput.tsx
index de99bc3009..2b520e1674 100644
--- a/demo/scripts/components/FocusedInput.tsx
+++ b/demo/scripts/components/FocusedInput.tsx
@@ -20,7 +20,7 @@ function FocusedInput({
   onChange: (newVal: string) => void;
   value?: string;
   placeholder?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const inputEl = useRef<HTMLInputElement>(null);
   useEffect(
     () => {
diff --git a/demo/scripts/components/GenerateLinkButton.tsx b/demo/scripts/components/GenerateLinkButton.tsx
index 2dc5b3be79..dfba9ca48d 100644
--- a/demo/scripts/components/GenerateLinkButton.tsx
+++ b/demo/scripts/components/GenerateLinkButton.tsx
@@ -6,7 +6,7 @@ function GenerateLinkButton({
 }: {
   enabled: boolean;
   onClick: () => void;
-}): JSX.Element {
+}): React.JSX.Element {
   return (
     <button
       aria-label="Generate link for the current custom button"
diff --git a/demo/scripts/components/GenerateLinkURL.tsx b/demo/scripts/components/GenerateLinkURL.tsx
index 6c1c0915f0..95de187d83 100644
--- a/demo/scripts/components/GenerateLinkURL.tsx
+++ b/demo/scripts/components/GenerateLinkURL.tsx
@@ -4,7 +4,11 @@ import * as React from "react";
  * @param {Object} props
  * @returns {Object}
  */
-function GeneratedLinkURL({ url }: { url: string | undefined | null }): JSX.Element {
+function GeneratedLinkURL({
+  url,
+}: {
+  url: string | undefined | null;
+}): React.JSX.Element {
   if (url === undefined || url === null || url === "") {
     return (
       <span>
diff --git a/demo/scripts/components/GitHubButton.tsx b/demo/scripts/components/GitHubButton.tsx
index 4cca60c9da..2766f95adb 100644
--- a/demo/scripts/components/GitHubButton.tsx
+++ b/demo/scripts/components/GitHubButton.tsx
@@ -23,7 +23,7 @@ const GitHubButton = ({
   dataText?: string;
   title?: string;
   children?: React.ReactNode;
-}): JSX.Element => {
+}): React.JSX.Element => {
   const aRef = useRef<HTMLAnchorElement>(null);
 
   useEffect(() => {
diff --git a/demo/scripts/components/Input.tsx b/demo/scripts/components/Input.tsx
index 12b2823341..e69ca88f56 100644
--- a/demo/scripts/components/Input.tsx
+++ b/demo/scripts/components/Input.tsx
@@ -18,7 +18,7 @@ function Input({
   onChange: (newVal: string) => void;
   value?: string;
   placeholder?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const onInputChange = React.useCallback(
     (evt: React.ChangeEvent<HTMLInputElement>) => {
       onChange(evt.target.value);
diff --git a/demo/scripts/components/Knob.tsx b/demo/scripts/components/Knob.tsx
index c4b7f6f3e5..c0b39d9859 100644
--- a/demo/scripts/components/Knob.tsx
+++ b/demo/scripts/components/Knob.tsx
@@ -17,7 +17,7 @@ function Knob({
   options: string[];
   selected: { index: number | undefined; value: string | undefined };
   disabled: boolean;
-}): JSX.Element {
+}): React.JSX.Element {
   return (
     <div className={`knob ${className}`}>
       <span className="knob-name">{name}</span>
diff --git a/demo/scripts/components/LivePosition.tsx b/demo/scripts/components/LivePosition.tsx
index 5210b72a7d..45529b0126 100644
--- a/demo/scripts/components/LivePosition.tsx
+++ b/demo/scripts/components/LivePosition.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
  * @param {Object} props
  * @returns {Object}
  */
-function LivePosition({ className = "" }: { className?: string }): JSX.Element {
+function LivePosition({ className = "" }: { className?: string }): React.JSX.Element {
   return <div className={"position-infos live " + className}>Live</div>;
 }
 
diff --git a/demo/scripts/components/Options/BufferOptions.tsx b/demo/scripts/components/Options/BufferOptions.tsx
index 77272d0ba7..109d85c5dc 100644
--- a/demo/scripts/components/Options/BufferOptions.tsx
+++ b/demo/scripts/components/Options/BufferOptions.tsx
@@ -32,7 +32,7 @@ function BufferOptions({
   onMaxVideoBufferSizeChange: (newVal: number) => void;
   onMaxBufferBehindChange: (newVal: number) => void;
   onMaxBufferAheadChange: (newVal: number) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   /* Value of the `wantedBufferAhead` input */
   const [wantedBufferAheadStr, setWantedBufferAheadStr] = useState(
     String(wantedBufferAhead),
diff --git a/demo/scripts/components/Options/Option.tsx b/demo/scripts/components/Options/Option.tsx
index 50d65ca7df..169902b8df 100644
--- a/demo/scripts/components/Options/Option.tsx
+++ b/demo/scripts/components/Options/Option.tsx
@@ -9,8 +9,8 @@ function Option({
   children,
 }: {
   title: string;
-  children: JSX.Element;
-}): JSX.Element {
+  children: React.JSX.Element;
+}): React.JSX.Element {
   return (
     <div className="optionWrapper">
       <h4 className="optionTitle">{title}</h4>
diff --git a/demo/scripts/components/Options/Playback.tsx b/demo/scripts/components/Options/Playback.tsx
index 1d5c164544..e3bf8362c9 100644
--- a/demo/scripts/components/Options/Playback.tsx
+++ b/demo/scripts/components/Options/Playback.tsx
@@ -15,7 +15,7 @@ function PlaybackConfig({
   onAutoPlayChange: (val: boolean) => void;
   tryRelyOnWorker: boolean;
   onTryRelyOnWorkerChange: (val: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   return (
     <>
       <li>
diff --git a/demo/scripts/components/Options/PlayerOptionNumberInput.tsx b/demo/scripts/components/Options/PlayerOptionNumberInput.tsx
index 0d5950aa37..675d1ef34d 100644
--- a/demo/scripts/components/Options/PlayerOptionNumberInput.tsx
+++ b/demo/scripts/components/Options/PlayerOptionNumberInput.tsx
@@ -25,7 +25,7 @@ function PlayerOptionNumberInput({
   defaultValueAsNumber: number;
   isDisabled: boolean;
   onResetClick: () => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const shouldBeDisabled = parseFloat(valueAsString) === defaultValueAsNumber;
   const onInputChange = React.useCallback(
     (evt: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/demo/scripts/components/Options/RequestConfig.tsx b/demo/scripts/components/Options/RequestConfig.tsx
index 5fb683ab2c..912b33fd62 100644
--- a/demo/scripts/components/Options/RequestConfig.tsx
+++ b/demo/scripts/components/Options/RequestConfig.tsx
@@ -47,7 +47,7 @@ function RequestConfig({
   onCmcdChange: (val: string) => void;
   segmentRequestTimeout: number;
   segmentRetry: number;
-}): JSX.Element {
+}): React.JSX.Element {
   /* Value of the `segmentRetry` input */
   const [segmentRetryStr, setSegmentRetryStr] = useState(String(segmentRetry));
   /* Value of the `segmentRequestTimeout` input */
diff --git a/demo/scripts/components/Options/TrackSwitch.tsx b/demo/scripts/components/Options/TrackSwitch.tsx
index d1d7b41f47..e64cf01f27 100644
--- a/demo/scripts/components/Options/TrackSwitch.tsx
+++ b/demo/scripts/components/Options/TrackSwitch.tsx
@@ -20,7 +20,7 @@ function TrackSwitchConfig({
   onCodecSwitch: string;
   onCodecSwitchChange: (val: string) => void;
   onEnableFastSwitchingChange: (val: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   let defaultAudioTrackSwitchingModeDescMsg;
   switch (defaultAudioTrackSwitchingMode) {
     case "reload":
diff --git a/demo/scripts/components/Options/VideoAdaptiveSettings.tsx b/demo/scripts/components/Options/VideoAdaptiveSettings.tsx
index af71d28b59..d775ca2644 100644
--- a/demo/scripts/components/Options/VideoAdaptiveSettings.tsx
+++ b/demo/scripts/components/Options/VideoAdaptiveSettings.tsx
@@ -25,7 +25,7 @@ function VideoAdaptiveSettings({
   throttleVideoBitrateWhenHidden: boolean;
   onVideoResolutionLimitChange: (newVal: { index: number; value: string }) => void;
   onThrottleVideoBitrateWhenHiddenChange: (newVal: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   let defaultVideoRepresentationsSwitchingModeDescMsg;
   switch (defaultVideoRepresentationsSwitchingMode) {
     case "reload":
diff --git a/demo/scripts/components/PositionInfos.tsx b/demo/scripts/components/PositionInfos.tsx
index b3710a0a46..a8378e5d32 100644
--- a/demo/scripts/components/PositionInfos.tsx
+++ b/demo/scripts/components/PositionInfos.tsx
@@ -15,7 +15,7 @@ function PositionInfos({
   className?: string | undefined;
   position?: number | undefined;
   duration?: number | undefined;
-}): JSX.Element {
+}): React.JSX.Element {
   const convertTime = duration >= 60 * 60 ? toHours : toMinutes;
   return (
     <div className={"position-infos " + className}>
diff --git a/demo/scripts/components/ProgressBar.tsx b/demo/scripts/components/ProgressBar.tsx
index c4e9d641e1..b7533a4cf0 100644
--- a/demo/scripts/components/ProgressBar.tsx
+++ b/demo/scripts/components/ProgressBar.tsx
@@ -33,7 +33,7 @@ function ProgressBar({
   maximumPosition: number | null | undefined;
   onMouseMove: (pos: number, evt: React.MouseEvent) => void;
   onMouseOut: (evt: React.MouseEvent) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
   const usedMinimum = minimumPosition ?? 0;
   const usedMaximum = maximumPosition ?? 300;
diff --git a/demo/scripts/components/Select.tsx b/demo/scripts/components/Select.tsx
index 9596954974..f6b8e00acc 100644
--- a/demo/scripts/components/Select.tsx
+++ b/demo/scripts/components/Select.tsx
@@ -24,7 +24,7 @@ function Select({
   selected: { index: number | undefined; value: string | undefined };
   options?: string[] | Array<{ name: string; disabled: boolean }>;
   disabled: boolean;
-}): JSX.Element {
+}): React.JSX.Element {
   let selectedIndex = typeof selected.index === "number" ? selected.index : undefined;
 
   const optionsEl = options.map((val, index) => {
diff --git a/demo/scripts/components/StickToLiveEdgeButton.tsx b/demo/scripts/components/StickToLiveEdgeButton.tsx
index 2303472544..04afed9de8 100644
--- a/demo/scripts/components/StickToLiveEdgeButton.tsx
+++ b/demo/scripts/components/StickToLiveEdgeButton.tsx
@@ -6,7 +6,7 @@ function StickToLiveEdgeButton({
 }: {
   isStickingToTheLiveEdge: boolean;
   changeStickToLiveEdge: (newVal: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const onClick = React.useCallback(() => {
     changeStickToLiveEdge(!isStickingToTheLiveEdge);
   }, [changeStickToLiveEdge, isStickingToTheLiveEdge]);
diff --git a/demo/scripts/components/ToolTip.tsx b/demo/scripts/components/ToolTip.tsx
index 6db307ce52..65fd573c1f 100644
--- a/demo/scripts/components/ToolTip.tsx
+++ b/demo/scripts/components/ToolTip.tsx
@@ -12,7 +12,7 @@ function ToolTip({
   offset: number;
   text: string;
   xPosition: number;
-}): JSX.Element {
+}): React.JSX.Element {
   const wrapperEl = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (isNaN(+xPosition) || !wrapperEl.current) {
diff --git a/demo/scripts/components/VideoThumbnail.tsx b/demo/scripts/components/VideoThumbnail.tsx
index 1a4cf94ae6..1954147932 100644
--- a/demo/scripts/components/VideoThumbnail.tsx
+++ b/demo/scripts/components/VideoThumbnail.tsx
@@ -26,7 +26,7 @@ export default function VideoThumbnail({
   player: IPlayerModule;
   xPosition: number | null;
   time: number;
-}): JSX.Element {
+}): React.JSX.Element {
   const videoThumbnailLoader = useModuleState(player, "videoThumbnailLoader");
   const videoElement = useModuleState(player, "videoThumbnailsElement");
 
diff --git a/demo/scripts/controllers/ContentList.tsx b/demo/scripts/controllers/ContentList.tsx
index f24942fb82..a16945ca3b 100644
--- a/demo/scripts/controllers/ContentList.tsx
+++ b/demo/scripts/controllers/ContentList.tsx
@@ -253,7 +253,7 @@ function ContentList({
   loadVideo: (opts: ILoadVideoOptions) => void;
   showOptions: boolean;
   onOptionToggle: () => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const initialContents = React.useMemo(() => {
     return constructContentList();
   }, []);
diff --git a/demo/scripts/controllers/ErrorDisplayer.tsx b/demo/scripts/controllers/ErrorDisplayer.tsx
index 18eb99c8b2..0526993b5a 100644
--- a/demo/scripts/controllers/ErrorDisplayer.tsx
+++ b/demo/scripts/controllers/ErrorDisplayer.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import useModuleState from "../lib/useModuleState";
 import type { IPlayerModule } from "../modules/player/index";
 
-function PlayerError({ error }: { error: Error }): JSX.Element {
+function PlayerError({ error }: { error: Error }): React.JSX.Element {
   const message: string =
     typeof error.message === "string" ? error.message : String(error);
 
@@ -15,7 +15,7 @@ function PlayerError({ error }: { error: Error }): JSX.Element {
   );
 }
 
-function ErrorDisplayer({ player }: { player: IPlayerModule }): JSX.Element {
+function ErrorDisplayer({ player }: { player: IPlayerModule }): React.JSX.Element {
   const error = useModuleState(player, "error");
   return (
     <div className="player-error">{error ? <PlayerError error={error} /> : null}</div>
diff --git a/demo/scripts/controllers/FullScreenButton.tsx b/demo/scripts/controllers/FullScreenButton.tsx
index 9c98b66dd9..e0d927943e 100644
--- a/demo/scripts/controllers/FullScreenButton.tsx
+++ b/demo/scripts/controllers/FullScreenButton.tsx
@@ -27,7 +27,7 @@ function FullscreenButton({
   playerWrapperElementRef: { current: HTMLElement | null };
   player: IPlayerModule;
   className: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const hasCurrentContent = useModuleState(player, "hasCurrentContent");
   const isInitiallyFullscreen = useMemo(() => isFullscreen(), []);
   const [isCurrentlyFullScreen, setIsCurrentlyFullScreen] =
diff --git a/demo/scripts/controllers/Main.tsx b/demo/scripts/controllers/Main.tsx
index 682bb1b778..1670e28287 100644
--- a/demo/scripts/controllers/Main.tsx
+++ b/demo/scripts/controllers/Main.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import GitHubButton from "../components/GitHubButton";
 import Player from "./Player";
 
-function MainComponent(): JSX.Element {
+function MainComponent(): React.JSX.Element {
   return (
     <React.Fragment>
       <header>
diff --git a/demo/scripts/controllers/PlayPauseButton.tsx b/demo/scripts/controllers/PlayPauseButton.tsx
index c97affa5a3..e96def9e90 100644
--- a/demo/scripts/controllers/PlayPauseButton.tsx
+++ b/demo/scripts/controllers/PlayPauseButton.tsx
@@ -15,7 +15,7 @@ function PlayPauseButton({
 }: {
   className?: string | undefined;
   player: IPlayerModule;
-}): JSX.Element {
+}): React.JSX.Element {
   const cannotLoadMetadata = useModuleState(player, "cannotLoadMetadata");
   const isPaused = useModuleState(player, "isPaused");
   const isContentLoaded = useModuleState(player, "isContentLoaded");
diff --git a/demo/scripts/controllers/Player.tsx b/demo/scripts/controllers/Player.tsx
index 398d9d3f4e..1c14fbbc5d 100644
--- a/demo/scripts/controllers/Player.tsx
+++ b/demo/scripts/controllers/Player.tsx
@@ -23,7 +23,7 @@ const { useCallback, useEffect, useRef, useState } = React;
 // time in ms while seeking/loading/buffering after which the spinner is shown
 const SPINNER_TIMEOUT = 300;
 
-function Player(): JSX.Element {
+function Player(): React.JSX.Element {
   const [
     defaultAudioRepresentationsSwitchingMode,
     setDefaultAudioRepresentationsSwitchingMode,
diff --git a/demo/scripts/controllers/ProgressBar.tsx b/demo/scripts/controllers/ProgressBar.tsx
index c891175056..69ec83818a 100644
--- a/demo/scripts/controllers/ProgressBar.tsx
+++ b/demo/scripts/controllers/ProgressBar.tsx
@@ -13,7 +13,7 @@ function ProgressBar({
   player: IPlayerModule;
   enableVideoThumbnails: boolean;
   onSeek: () => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const bufferGap = useModuleState(player, "bufferGap");
   const currentTime = useModuleState(player, "currentTime");
   const isContentLoaded = useModuleState(player, "isContentLoaded");
@@ -124,7 +124,7 @@ function ProgressBar({
     );
   }
 
-  let thumbnailElement: JSX.Element | null = null;
+  let thumbnailElement: React.JSX.Element | null = null;
   if (thumbnailIsVisible) {
     const xThumbnailPosition = tipPosition - toolTipOffset;
     if (enableVideoThumbnails && imageTime !== null) {
diff --git a/demo/scripts/controllers/Settings.tsx b/demo/scripts/controllers/Settings.tsx
index eb56e5e0f9..979534b01f 100644
--- a/demo/scripts/controllers/Settings.tsx
+++ b/demo/scripts/controllers/Settings.tsx
@@ -51,7 +51,7 @@ function Settings({
   tryRelyOnWorker: boolean;
   updateTryRelyOnWorker: (tryRelyOnWorker: boolean) => void;
   showOptions: boolean;
-}): JSX.Element | null {
+}): React.JSX.Element | null {
   const {
     videoResolutionLimit,
     maxBufferAhead,
diff --git a/demo/scripts/controllers/VolumeBar.tsx b/demo/scripts/controllers/VolumeBar.tsx
index ae45221753..709dc4eca6 100644
--- a/demo/scripts/controllers/VolumeBar.tsx
+++ b/demo/scripts/controllers/VolumeBar.tsx
@@ -15,7 +15,7 @@ function VolumeBar({
   player, // current volume percentage
 }: {
   player: IPlayerModule;
-}): JSX.Element {
+}): React.JSX.Element {
   const { volume, muted } = useModuleState(player, "volumeInfo");
   const elementRef = React.useRef<HTMLDivElement>(null);
 
diff --git a/demo/scripts/controllers/charts/BufferSize.tsx b/demo/scripts/controllers/charts/BufferSize.tsx
index 0387e6e458..c04f661735 100644
--- a/demo/scripts/controllers/charts/BufferSize.tsx
+++ b/demo/scripts/controllers/charts/BufferSize.tsx
@@ -60,7 +60,7 @@ const NUMBER_GRID_LINES_HEIGHT = 10;
  * @param {Object} props
  * @returns {Object}
  */
-function BufferSizeChart({ module }: { module: IChartModule }): JSX.Element {
+function BufferSizeChart({ module }: { module: IChartModule }): React.JSX.Element {
   const data = useModuleState(module, "data");
   const canvasEl = useRef<HTMLCanvasElement>(null);
   const canvasCtx = useRef<CanvasRenderingContext2D | null>(null);
diff --git a/demo/scripts/controllers/knobs/AudioRepresentation.tsx b/demo/scripts/controllers/knobs/AudioRepresentation.tsx
index 7759edf63f..e0e4deeca4 100644
--- a/demo/scripts/controllers/knobs/AudioRepresentation.tsx
+++ b/demo/scripts/controllers/knobs/AudioRepresentation.tsx
@@ -14,7 +14,7 @@ function AudioRepresentationKnob({
 }: {
   player: IPlayerModule;
   className?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const isAudioRepresentationLocked = useModuleState(
     player,
     "audioRepresentationsLocked",
diff --git a/demo/scripts/controllers/knobs/AudioTrack.tsx b/demo/scripts/controllers/knobs/AudioTrack.tsx
index dceb77fa6c..0b1c13e5b7 100644
--- a/demo/scripts/controllers/knobs/AudioTrack.tsx
+++ b/demo/scripts/controllers/knobs/AudioTrack.tsx
@@ -25,7 +25,7 @@ function AudioTrackKnob({
 }: {
   player: IPlayerModule;
   className?: string | undefined;
-}): JSX.Element {
+}): React.JSX.Element {
   const currentAudioTrack = useModuleState(player, "audioTrack");
   const availableAudioTracks = useModuleState(player, "availableAudioTracks");
 
diff --git a/demo/scripts/controllers/knobs/SpeedKnob.tsx b/demo/scripts/controllers/knobs/SpeedKnob.tsx
index 2a7f1fdd08..e1fade09d3 100644
--- a/demo/scripts/controllers/knobs/SpeedKnob.tsx
+++ b/demo/scripts/controllers/knobs/SpeedKnob.tsx
@@ -20,7 +20,7 @@ function SpeedKnob({
 }: {
   player: IPlayerModule;
   className?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const playbackRate = useModuleState(player, "playbackRate");
   let selectedIndex = AVAILABLE_RATES.findIndex((rate) => playbackRate === rate);
 
diff --git a/demo/scripts/controllers/knobs/Subtitles.tsx b/demo/scripts/controllers/knobs/Subtitles.tsx
index e1752c3e36..a509caa28a 100644
--- a/demo/scripts/controllers/knobs/Subtitles.tsx
+++ b/demo/scripts/controllers/knobs/Subtitles.tsx
@@ -22,7 +22,7 @@ function SubtitlesKnob({
 }: {
   player: IPlayerModule;
   className?: string | undefined;
-}): JSX.Element {
+}): React.JSX.Element {
   const currentSubtitle = useModuleState(player, "subtitle");
   const availableSubtitles = useModuleState(player, "availableSubtitles");
 
diff --git a/demo/scripts/controllers/knobs/VideoRepresentation.tsx b/demo/scripts/controllers/knobs/VideoRepresentation.tsx
index f70255acc4..5b6e1fb978 100644
--- a/demo/scripts/controllers/knobs/VideoRepresentation.tsx
+++ b/demo/scripts/controllers/knobs/VideoRepresentation.tsx
@@ -14,7 +14,7 @@ function VideoRepresentationKnob({
 }: {
   player: IPlayerModule;
   className?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const isVideoRepresentationLocked = useModuleState(
     player,
     "videoRepresentationsLocked",
diff --git a/demo/scripts/controllers/knobs/VideoTrack.tsx b/demo/scripts/controllers/knobs/VideoTrack.tsx
index 38d4d990ba..c46448f984 100644
--- a/demo/scripts/controllers/knobs/VideoTrack.tsx
+++ b/demo/scripts/controllers/knobs/VideoTrack.tsx
@@ -22,7 +22,7 @@ function VideoTrackKnob({
 }: {
   player: IPlayerModule;
   className?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const currentVideoTrack = useModuleState(player, "videoTrack");
   const availableVideoTracks = useModuleState(player, "availableVideoTracks");
   const [options, selectedIndex]: [string[], number] = React.useMemo(() => {