Update Type Definitions to v19 (major) (#1789)

* Update Type Definitions to v19 * Update types Signed-off-by: Marvin A. Ruder <[email protected]> --------- Signed-off-by: Marvin A. Ruder <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Marvin A. Ruder <[email protected]>
marvinruder · Dec 5, 2024 · ee4262b · ee4262b
1 parent caf74f5
commit ee4262b
Show file tree

Hide file tree

Showing 88 changed files with 124 additions and 124 deletions.
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -56,8 +56,8 @@
   "devDependencies": {
     "@rating-tracker/backend": "workspace:*",
     "@types/node": "22.10.1",
-    "@types/react": "18.3.13",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@typescript-eslint/eslint-plugin": "8.17.0",
     "@typescript-eslint/parser": "8.17.0",
     "eslint": "9.16.0",

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -15,7 +15,7 @@ import { theme } from "./theme";
  * The Rating Tracker Application.
  * @returns The component.
  */
-const App = (): JSX.Element => {
+const App = (): React.JSX.Element => {
   /**
    * The routes to the different views.
    */

diff --git a/packages/frontend/src/components/autocomplete/CountryAutocomplete.tsx b/packages/frontend/src/components/autocomplete/CountryAutocomplete.tsx
@@ -7,7 +7,7 @@ import { useState } from "react";
  * @param props The properties of the component.
  * @returns The component.
  */
-const CountryAutocomplete = (props: CountryAutocompleteProps): JSX.Element => {
+const CountryAutocomplete = (props: CountryAutocompleteProps): React.JSX.Element => {
   // The value of the text field in the country autocomplete.
   const [countryInputValue, setCountryInputValue] = useState<string>("");
 
@@ -78,7 +78,7 @@ interface CountryAutocompleteProps {
   /**
    * The ref of the input element.
    */
-  inputRef?: React.RefObject<HTMLInputElement>;
+  inputRef?: React.RefObject<HTMLInputElement | null>;
   /**
    * Whether the field is required.
    */

diff --git a/packages/frontend/src/components/autocomplete/CurrencyAutocomplete.tsx b/packages/frontend/src/components/autocomplete/CurrencyAutocomplete.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
  * @param props The properties of the component.
  * @returns The component.
  */
-const CurrencyAutocomplete = (props: CurrencyAutocompleteProps): JSX.Element => {
+const CurrencyAutocomplete = (props: CurrencyAutocompleteProps): React.JSX.Element => {
   // The value of the text field in the currency autocomplete.
   const [currencyInputValue, setCurrencyInputValue] = useState<string>("");
 
@@ -80,7 +80,7 @@ interface CurrencyAutocompleteProps {
   /**
    * The ref of the input element.
    */
-  inputRef?: React.RefObject<HTMLInputElement>;
+  inputRef?: React.RefObject<HTMLInputElement | null>;
   /**
    * Whether the field is required.
    */

diff --git a/packages/frontend/src/components/autocomplete/YahooStockStubAutocomplete.tsx b/packages/frontend/src/components/autocomplete/YahooStockStubAutocomplete.tsx
@@ -13,7 +13,7 @@ import { StockPreview } from "../stock/layouts/StockPreview";
  * @param props The properties of the component.
  * @returns The component.
  */
-const YahooStockStubAutocomplete = (props: YahooStockStubAutocompleteProps): JSX.Element => {
+const YahooStockStubAutocomplete = (props: YahooStockStubAutocompleteProps): React.JSX.Element => {
   // The value of the text field in the autocomplete.
   const [queryInputValue, setQueryInputValue] = useState<string>("");
   const [stockStubs, setStockStubs] = useState<YahooStockStub[]>([]);

diff --git a/packages/frontend/src/components/chips/BlueIconChip.tsx b/packages/frontend/src/components/chips/BlueIconChip.tsx
@@ -7,7 +7,7 @@ import type { FC } from "react";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const BlueIconChip: FC<ChipProps> = (props: ChipProps): JSX.Element => {
+export const BlueIconChip: FC<ChipProps> = (props: ChipProps): React.JSX.Element => {
   const theme = useTheme();
   return <Chip {...props} sx={{ ...props.sx, ".MuiChip-icon": { color: theme.palette.primary.main } }} />;
 };
diff --git a/packages/frontend/src/components/chips/GreenIconChip.tsx b/packages/frontend/src/components/chips/GreenIconChip.tsx
@@ -7,7 +7,7 @@ import type { FC } from "react";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const GreenIconChip: FC<ChipProps> = (props: ChipProps): JSX.Element => {
+export const GreenIconChip: FC<ChipProps> = (props: ChipProps): React.JSX.Element => {
   const theme = useTheme();
   return <Chip {...props} sx={{ ...props.sx, ".MuiChip-icon": { color: theme.palette.sector.Defensive } }} />;
 };
diff --git a/packages/frontend/src/components/chips/TemperatureChip.tsx b/packages/frontend/src/components/chips/TemperatureChip.tsx
@@ -12,7 +12,7 @@ import { getMSCITemperatureColorIndex } from "../../utils/colorResolvers";
  */
 export const TemperatureChip: FC<ChipProps & { msciTemperature: number }> = (
   props: ChipProps & { msciTemperature: number },
-): JSX.Element => {
+): React.JSX.Element => {
   const { msciTemperature, ...chipProps } = props;
 
   return (

diff --git a/packages/frontend/src/components/chips/YellowIconChip.tsx b/packages/frontend/src/components/chips/YellowIconChip.tsx
@@ -7,7 +7,7 @@ import type { FC } from "react";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const YellowIconChip: FC<ChipProps> = (props: ChipProps): JSX.Element => {
+export const YellowIconChip: FC<ChipProps> = (props: ChipProps): React.JSX.Element => {
   const theme = useTheme();
   return <Chip {...props} sx={{ ...props.sx, ".MuiChip-icon": { color: theme.palette.msci.Average } }} />;
 };
diff --git a/packages/frontend/src/components/dialogs/PinnedDialog.tsx b/packages/frontend/src/components/dialogs/PinnedDialog.tsx
@@ -6,7 +6,7 @@ import { Dialog } from "@mui/material";
  * @param props The properties of the component.
  * @returns The component.
  */
-const PinnedDialog = (props: DialogProps): JSX.Element => {
+const PinnedDialog = (props: DialogProps): React.JSX.Element => {
   return (
     <Dialog
       {...props}

diff --git a/packages/frontend/src/components/dialogs/portfolio/AddPortfolio.tsx b/packages/frontend/src/components/dialogs/portfolio/AddPortfolio.tsx
@@ -14,7 +14,7 @@ import CurrencyAutocomplete from "../../autocomplete/CurrencyAutocomplete";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const AddPortfolio = (props: AddPortfolioProps): JSX.Element => {
+export const AddPortfolio = (props: AddPortfolioProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState<boolean>(false);
   const [name, setName] = useState<string>("");
   const [currency, setCurrency] = useState<Currency>();

diff --git a/packages/frontend/src/components/dialogs/portfolio/AddStockToPortfolio.tsx b/packages/frontend/src/components/dialogs/portfolio/AddStockToPortfolio.tsx
@@ -30,7 +30,7 @@ import { AddPortfolio } from "./AddPortfolio";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const AddStockToPortfolio = (props: AddStockToPortfolioProps): JSX.Element => {
+export const AddStockToPortfolio = (props: AddStockToPortfolioProps): React.JSX.Element => {
   const [portfolioSummaries, setPortfolioSummaries] = useState<PortfolioSummary[]>([]);
   const [portfolioSummariesFinal, setPortfolioSummariesFinal] = useState<boolean>(false);
   const [amountInput, setAmountInput] = useState<string>("");

diff --git a/packages/frontend/src/components/dialogs/portfolio/DeletePortfolio.tsx b/packages/frontend/src/components/dialogs/portfolio/DeletePortfolio.tsx
@@ -13,7 +13,7 @@ import { useNotificationContextUpdater } from "../../../contexts/NotificationCon
  * @param props The properties of the component.
  * @returns The component.
  */
-export const DeletePortfolio = (props: DeletePortfolioProps): JSX.Element => {
+export const DeletePortfolio = (props: DeletePortfolioProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState(false);
 
   const { setErrorNotificationOrClearSession } = useNotificationContextUpdater();

diff --git a/packages/frontend/src/components/dialogs/portfolio/EditPortfolio.tsx b/packages/frontend/src/components/dialogs/portfolio/EditPortfolio.tsx
@@ -14,7 +14,7 @@ import CurrencyAutocomplete from "../../autocomplete/CurrencyAutocomplete";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const EditPortfolio = (props: EditPortfolioProps): JSX.Element => {
+export const EditPortfolio = (props: EditPortfolioProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState<boolean>(false);
   const [name, setName] = useState<string>(props.portfolio?.name);
   const [currency, setCurrency] = useState<Currency>(props.portfolio?.currency);

diff --git a/packages/frontend/src/components/dialogs/portfolio/RemoveStockFromPortfolio.tsx b/packages/frontend/src/components/dialogs/portfolio/RemoveStockFromPortfolio.tsx
@@ -13,7 +13,7 @@ import { useNotificationContextUpdater } from "../../../contexts/NotificationCon
  * @param props The properties of the component.
  * @returns The component.
  */
-export const RemoveStockFromPortfolio = (props: RemoveStockFromPortfolioProps): JSX.Element => {
+export const RemoveStockFromPortfolio = (props: RemoveStockFromPortfolioProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState(false);
 
   const { setErrorNotificationOrClearSession } = useNotificationContextUpdater();

diff --git a/packages/frontend/src/components/dialogs/portfolio/UpdateStocksInPortfolio.tsx b/packages/frontend/src/components/dialogs/portfolio/UpdateStocksInPortfolio.tsx
@@ -34,7 +34,7 @@ import { AddPortfolio } from "./AddPortfolio";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const UpdateStocksInPortfolio = (props: UpdateStocksInPortfolioProps): JSX.Element => {
+export const UpdateStocksInPortfolio = (props: UpdateStocksInPortfolioProps): React.JSX.Element => {
   const [portfolioSummaries, setPortfolioSummaries] = useState<PortfolioSummary[]>([]);
   const [portfolioSummariesFinal, setPortfolioSummariesFinal] = useState<boolean>(false);
   const [addPortfolioOpen, setAddPortfolioOpen] = useState<boolean>(false);

diff --git a/packages/frontend/src/components/dialogs/stock/AddStock.tsx b/packages/frontend/src/components/dialogs/stock/AddStock.tsx
@@ -40,7 +40,7 @@ import { StockDetails } from "../../stock/layouts/StockDetails";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const AddStock = (props: AddStockProps): JSX.Element => {
+export const AddStock = (props: AddStockProps): React.JSX.Element => {
   const [activeStep, setActiveStep] = useState<number>(0); // The dialog step to show.
   const [stock, setStock] = useState<OmitDynamicAttributesStock>({
     ...optionalStockValuesNull,

diff --git a/packages/frontend/src/components/dialogs/stock/AddStockToCollection.tsx b/packages/frontend/src/components/dialogs/stock/AddStockToCollection.tsx
@@ -24,7 +24,7 @@ import SelectStock from "./SelectStock";
  * @param props The properties of the component.
  * @returns The component.
  */
-const AddStockToCollection = (props: AddStockToCollectionProps): JSX.Element => {
+const AddStockToCollection = (props: AddStockToCollectionProps): React.JSX.Element => {
   const [amountInput, setAmountInput] = useState<string>("");
   const [amountError, setAmountError] = useState<string>(""); // Error message for the amount text field.
   const { setErrorNotificationOrClearSession } = useNotificationContextUpdater();

diff --git a/packages/frontend/src/components/dialogs/stock/DeleteStock.tsx b/packages/frontend/src/components/dialogs/stock/DeleteStock.tsx
@@ -13,7 +13,7 @@ import { useNotificationContextUpdater } from "../../../contexts/NotificationCon
  * @param props The properties of the component.
  * @returns The component.
  */
-export const DeleteStock = (props: DeleteStockProps): JSX.Element => {
+export const DeleteStock = (props: DeleteStockProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState(false);
 
   const { setErrorNotificationOrClearSession } = useNotificationContextUpdater();

diff --git a/packages/frontend/src/components/dialogs/stock/EditStock.tsx b/packages/frontend/src/components/dialogs/stock/EditStock.tsx
@@ -29,7 +29,7 @@ import CountryAutocomplete from "../../autocomplete/CountryAutocomplete";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const EditStock = (props: EditStockProps): JSX.Element => {
+export const EditStock = (props: EditStockProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState<boolean>(false);
   const [unsafeRequestSent, setUnsafeRequestSent] = useState<boolean>(false); // Whether an unsafe request was sent.
   const [name, setName] = useState<string>(props.stock.name);

diff --git a/packages/frontend/src/components/dialogs/stock/SelectStock.tsx b/packages/frontend/src/components/dialogs/stock/SelectStock.tsx
@@ -30,7 +30,7 @@ import { StockPreview } from "../../stock/layouts/StockPreview";
  * @param props The properties of the component.
  * @returns The component.
  */
-const SelectStock = (props: SelectStockProps): JSX.Element => {
+const SelectStock = (props: SelectStockProps): React.JSX.Element => {
   const [searchValue, setSearchValue] = useState("");
   const [stocks, setStocks] = useState<Stock[]>([]);
   const [count, setCount] = useState<number>(0);

diff --git a/packages/frontend/src/components/dialogs/user/DeleteUser.tsx b/packages/frontend/src/components/dialogs/user/DeleteUser.tsx
@@ -13,7 +13,7 @@ import { useNotificationContextUpdater } from "../../../contexts/NotificationCon
  * @param props The properties of the component.
  * @returns The component.
  */
-export const DeleteUser = (props: DeleteUserProps): JSX.Element => {
+export const DeleteUser = (props: DeleteUserProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState(false);
 
   const { setErrorNotificationOrClearSession } = useNotificationContextUpdater();

diff --git a/packages/frontend/src/components/dialogs/user/SendEmailToUser.tsx b/packages/frontend/src/components/dialogs/user/SendEmailToUser.tsx
@@ -28,7 +28,7 @@ import { useNotificationContextUpdater } from "../../../contexts/NotificationCon
  * @param props The properties of the component.
  * @returns The component.
  */
-export const SendEmailToUser = (props: SendEmailToUserProps): JSX.Element => {
+export const SendEmailToUser = (props: SendEmailToUserProps): React.JSX.Element => {
   const [selectedTemplate, setSelectedTemplate] = useState<EmailTemplate | null>(null);
   const [templatePreview, setTemplatePreview] = useState<{
     from: string;

diff --git a/packages/frontend/src/components/dialogs/watchlist/AddStockToWatchlist.tsx b/packages/frontend/src/components/dialogs/watchlist/AddStockToWatchlist.tsx
@@ -30,7 +30,7 @@ import { AddWatchlist } from "./AddWatchlist";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const AddStockToWatchlist = (props: AddStockToWatchlistProps): JSX.Element => {
+export const AddStockToWatchlist = (props: AddStockToWatchlistProps): React.JSX.Element => {
   const [watchlistSummaries, setWatchlistSummaries] = useState<WatchlistSummary[]>([]);
   const [watchlistSummariesFinal, setWatchlistSummariesFinal] = useState<boolean>(false);
   const [addWatchlistOpen, setAddWatchlistOpen] = useState<boolean>(false);

diff --git a/packages/frontend/src/components/dialogs/watchlist/AddWatchlist.tsx b/packages/frontend/src/components/dialogs/watchlist/AddWatchlist.tsx
@@ -12,7 +12,7 @@ import { useNotificationContextUpdater } from "../../../contexts/NotificationCon
  * @param props The properties of the component.
  * @returns The component.
  */
-export const AddWatchlist = (props: AddWatchlistProps): JSX.Element => {
+export const AddWatchlist = (props: AddWatchlistProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState<boolean>(false);
   const [name, setName] = useState<string>("");
   const [nameError, setNameError] = useState<string>(""); // Error message for the name text field.

diff --git a/packages/frontend/src/components/dialogs/watchlist/DeleteWatchlist.tsx b/packages/frontend/src/components/dialogs/watchlist/DeleteWatchlist.tsx
@@ -13,7 +13,7 @@ import { useNotificationContextUpdater } from "../../../contexts/NotificationCon
  * @param props The properties of the component.
  * @returns The component.
  */
-export const DeleteWatchlist = (props: DeleteWatchlistProps): JSX.Element => {
+export const DeleteWatchlist = (props: DeleteWatchlistProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState(false);
 
   const { setErrorNotificationOrClearSession } = useNotificationContextUpdater();

diff --git a/packages/frontend/src/components/dialogs/watchlist/RemoveStockFromWatchlist.tsx b/packages/frontend/src/components/dialogs/watchlist/RemoveStockFromWatchlist.tsx
@@ -14,7 +14,7 @@ import { useNotificationContextUpdater } from "../../../contexts/NotificationCon
  * @param props The properties of the component.
  * @returns The component.
  */
-export const RemoveStockFromWatchlist = (props: RemoveStockFromWatchlistProps): JSX.Element => {
+export const RemoveStockFromWatchlist = (props: RemoveStockFromWatchlistProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState(false);
 
   const { refetchFavorites } = useFavoritesContextUpdater();

diff --git a/packages/frontend/src/components/dialogs/watchlist/RenameWatchlist.tsx b/packages/frontend/src/components/dialogs/watchlist/RenameWatchlist.tsx
@@ -13,7 +13,7 @@ import { useNotificationContextUpdater } from "../../../contexts/NotificationCon
  * @param props The properties of the component.
  * @returns The component.
  */
-export const RenameWatchlist = (props: RenameWatchlistProps): JSX.Element => {
+export const RenameWatchlist = (props: RenameWatchlistProps): React.JSX.Element => {
   const [requestInProgress, setRequestInProgress] = useState<boolean>(false);
   const [name, setName] = useState<string>(props.watchlist?.name);
   const [nameError, setNameError] = useState<string>(""); // Error message for the name text field.

diff --git a/packages/frontend/src/components/etc/CheckboxAccordion.tsx b/packages/frontend/src/components/etc/CheckboxAccordion.tsx
@@ -6,7 +6,7 @@ import { Accordion, AccordionSummary, FormControlLabel, Checkbox, AccordionDetai
  * @param props The properties of the component.
  * @returns The component.
  */
-const CheckboxAccordion = (props: React.PropsWithChildren<CheckboxAccordionProps>): JSX.Element => (
+const CheckboxAccordion = (props: React.PropsWithChildren<CheckboxAccordionProps>): React.JSX.Element => (
   <Accordion
     expanded={props.expanded}
     onChange={(event, isExpanded) =>

diff --git a/packages/frontend/src/components/etc/DiffProgressBar.tsx b/packages/frontend/src/components/etc/DiffProgressBar.tsx
@@ -9,7 +9,7 @@ import { formatPercentage } from "../../utils/formatters";
  * @param props The properties of the component.
  * @returns The component.
  */
-const DiffProgressBar = (props: DiffProgressBarProps): JSX.Element => (
+const DiffProgressBar = (props: DiffProgressBarProps): React.JSX.Element => (
   <>
     <Typography variant="subtitle1" sx={{ display: "flex", justifyContent: "space-between" }}>
       <span>

diff --git a/packages/frontend/src/components/etc/HeaderWrapper.tsx b/packages/frontend/src/components/etc/HeaderWrapper.tsx
@@ -6,7 +6,7 @@ import type { ReactNode } from "react";
  * @param props The properties of the component.
  * @returns The component.
  */
-export const HeaderWrapper = (props: HeaderWrapperProps): JSX.Element => (
+export const HeaderWrapper = (props: HeaderWrapperProps): React.JSX.Element => (
   <Box
     sx={(theme) => ({
       pt: `calc(76px + ${theme.spacing(4)})`,

diff --git a/packages/frontend/src/components/etc/LogoBackground.tsx b/packages/frontend/src/components/etc/LogoBackground.tsx
@@ -13,7 +13,7 @@ const MAX_COUNT = 50;
  * The background of the page, showing stock logos.
  * @returns The component.
  */
-export const LogoBackground = (): JSX.Element => {
+export const LogoBackground = (): React.JSX.Element => {
   const [logos, setLogos] = useState<string[]>([]);
 
   const theme = useTheme();

diff --git a/packages/frontend/src/components/etc/Navigators.tsx b/packages/frontend/src/components/etc/Navigators.tsx
@@ -7,7 +7,7 @@ import { dataProviderName, type Stock } from "@rating-tracker/commons";
  * @param props The properties of the component.
  * @returns The component.
  */
-const LinkToDataProvider = (props: React.PropsWithChildren<LinkToDataProviderProps>): JSX.Element => {
+const LinkToDataProvider = (props: React.PropsWithChildren<LinkToDataProviderProps>): React.JSX.Element => {
   return props.href && props.stock ? (
     <Link
       aria-label={`Open “${props.stock.name}” on ${props.dataProvider} in a new tab.`}
@@ -29,7 +29,7 @@ const LinkToDataProvider = (props: React.PropsWithChildren<LinkToDataProviderPro
  * @param props The properties of the component.
  * @returns The component.
  */
-export const YahooNavigator = (props: React.PropsWithChildren<NavigatorProps>): JSX.Element => (
+export const YahooNavigator = (props: React.PropsWithChildren<NavigatorProps>): React.JSX.Element => (
   <LinkToDataProvider
     href={props.stock?.ticker?.match(/^[^_]/) ? `https://finance.yahoo.com/quote/${props.stock.ticker}` : ""}
     dataProvider={dataProviderName["yahoo"]}
@@ -45,7 +45,7 @@ export const YahooNavigator = (props: React.PropsWithChildren<NavigatorProps>):
  * @param props The properties of the component.
  * @returns The component.
  */
-export const MorningstarNavigator = (props: React.PropsWithChildren<NavigatorProps>): JSX.Element => (
+export const MorningstarNavigator = (props: React.PropsWithChildren<NavigatorProps>): React.JSX.Element => (
   <LinkToDataProvider
     href={
       props.stock?.morningstarID
@@ -66,7 +66,7 @@ export const MorningstarNavigator = (props: React.PropsWithChildren<NavigatorPro
  * @param props The properties of the component.
  * @returns The component.
  */
-export const MarketScreenerNavigator = (props: React.PropsWithChildren<NavigatorProps>): JSX.Element => (
+export const MarketScreenerNavigator = (props: React.PropsWithChildren<NavigatorProps>): React.JSX.Element => (
   <LinkToDataProvider
     href={
       props.stock?.marketScreenerID
@@ -86,7 +86,7 @@ export const MarketScreenerNavigator = (props: React.PropsWithChildren<Navigator
  * @param props The properties of the component.
  * @returns The component.
  */
-export const MSCINavigator = (props: React.PropsWithChildren<NavigatorProps>): JSX.Element => (
+export const MSCINavigator = (props: React.PropsWithChildren<NavigatorProps>): React.JSX.Element => (
   <LinkToDataProvider
     href={
       props.stock?.msciID
@@ -110,7 +110,7 @@ export const MSCINavigator = (props: React.PropsWithChildren<NavigatorProps>): J
  * @param props The properties of the component.
  * @returns The component.
  */
-export const LSEGNavigator = (props: React.PropsWithChildren<NavigatorProps>): JSX.Element => (
+export const LSEGNavigator = (props: React.PropsWithChildren<NavigatorProps>): React.JSX.Element => (
   <LinkToDataProvider
     href={
       props.stock?.ric
@@ -132,7 +132,7 @@ export const LSEGNavigator = (props: React.PropsWithChildren<NavigatorProps>): J
  * @param props The properties of the component.
  * @returns The component.
  */
-export const SPNavigator = (props: React.PropsWithChildren<NavigatorProps>): JSX.Element => (
+export const SPNavigator = (props: React.PropsWithChildren<NavigatorProps>): React.JSX.Element => (
   <LinkToDataProvider
     href={props.stock?.spID ? `https://www.spglobal.com/esg/scores/results?cid=${String(props.stock.spID)}` : ""}
     dataProvider={dataProviderName["sp"]}
@@ -148,7 +148,7 @@ export const SPNavigator = (props: React.PropsWithChildren<NavigatorProps>): JSX
  * @param props The properties of the component.
  * @returns The component.
  */
-export const SustainalyticsNavigator = (props: React.PropsWithChildren<NavigatorProps>): JSX.Element => (
+export const SustainalyticsNavigator = (props: React.PropsWithChildren<NavigatorProps>): React.JSX.Element => (
   <LinkToDataProvider
     href={
       props.stock?.sustainalyticsID ? `https://www.sustainalytics.com/esg-rating/${props.stock.sustainalyticsID}` : ""

diff --git a/packages/frontend/src/components/etc/NestedCheckboxList.tsx b/packages/frontend/src/components/etc/NestedCheckboxList.tsx
@@ -31,7 +31,7 @@ export const NestedCheckboxList = <
   FourthLevelType extends string,
 >(
   props: NestedCheckboxListProps<FirstLevelType, SecondLevelType, ThirdLevelType, FourthLevelType>,
-): JSX.Element => {
+): React.JSX.Element => {
   const [openFirstLevel, setOpenFirstLevel] = useState<FirstLevelType[]>([]);
   const [openSecondLevel, setOpenSecondLevel] = useState<SecondLevelType[]>([]);
   const [openThirdLevel, setOpenThirdLevel] = useState<ThirdLevelType[]>([]);