diff --git a/packages/components/package.json b/packages/components/package.json
index a7094306..0e5b8c2f 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -98,9 +98,9 @@
     "@types/jest": "^29.5.14",
     "@types/numeral": "^2",
     "@types/prop-types": "^15",
-    "@types/react": "^19",
+    "@types/react": "19.1.12",
     "@types/react-copy-to-clipboard": "^5",
-    "@types/react-dom": "^19",
+    "@types/react-dom": "19.1.1",
     "@types/react-loader": "^2",
     "@types/rollup-plugin-peer-deps-external": "^2",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
@@ -120,8 +120,8 @@
     "postcss-preset-env": "^10.2.0",
     "prettier": "^3.6.2",
     "prop-types": "^15.8.1",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "react-select-event": "^5.5.1",
     "rollup": "^4.50.0",
     "rollup-plugin-dts": "^6.2.1",
diff --git a/packages/components/src/ButtonWithPopup/index.tsx b/packages/components/src/ButtonWithPopup/index.tsx
index 37f153ed..c7eb5e50 100644
--- a/packages/components/src/ButtonWithPopup/index.tsx
+++ b/packages/components/src/ButtonWithPopup/index.tsx
@@ -1,7 +1,7 @@
 import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
 import { FaCaretUp } from "@react-icons/all-files/fa/FaCaretUp";
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import React, { ReactElement, ReactNode } from "react";
 import Popup, { PopupProps } from "../Popup";
 import css from "./index.module.css";
 
@@ -37,7 +37,7 @@ export default function ButtonWithPopup({
       offsetX={triggerText ? 32 : 0}
       contentStyle={{ width: "10rem" }}
       closeOnDocumentClick
-      trigger={open =>
+      trigger={(open: boolean) =>
         getTriggerButton(
           open,
           triggerText,
@@ -58,7 +58,7 @@ function getTriggerButton(
   triggerText?: string,
   buttonClassName?: string,
   dataCy?: string,
-): JSX.Element {
+): ReactElement {
   return (
     <button
       type="button"
diff --git a/packages/components/src/ErrorMsg/context.tsx b/packages/components/src/ErrorMsg/context.tsx
index 627d1231..37e40097 100644
--- a/packages/components/src/ErrorMsg/context.tsx
+++ b/packages/components/src/ErrorMsg/context.tsx
@@ -1,14 +1,20 @@
-import React, { createContext, useCallback, useContext, useMemo } from "react";
+import React, {
+  ReactElement,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
 
 type Props = {
   children: React.ReactNode;
   improveErrorMsgFn?: (m: string) => string;
-  renderDifferentComp?: (m: string) => JSX.Element | null;
+  renderDifferentComp?: (m: string) => ReactElement | null;
 };
 
 type ErrorMsgContextType = {
   improveErrorMsg: (m: string) => string;
-  renderDifferentComp?: (m: string) => JSX.Element | null;
+  renderDifferentComp?: (m: string) => ReactElement | null;
 };
 
 const ErrorMsgContext = createContext<ErrorMsgContextType>({
diff --git a/packages/components/src/ErrorMsg/index.tsx b/packages/components/src/ErrorMsg/index.tsx
index a7b99e20..c471ecb7 100644
--- a/packages/components/src/ErrorMsg/index.tsx
+++ b/packages/components/src/ErrorMsg/index.tsx
@@ -23,7 +23,7 @@ export default function ErrorMsg({ err, errString, className }: Props) {
   if (customComp !== null) {
     return React.cloneElement(customComp, {
       className: cx(css.errorMsg, className),
-    });
+    } as any);
   }
 
   const splitMsg = msg.split("\n").filter(Boolean);
diff --git a/packages/components/src/FormSelect/Async.tsx b/packages/components/src/FormSelect/Async.tsx
index fad9e976..3b1c36a8 100644
--- a/packages/components/src/FormSelect/Async.tsx
+++ b/packages/components/src/FormSelect/Async.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import AsyncSelect from "react-select/async";
 import Wrapper from "./Wrapper";
 import { getComponents } from "./components";
@@ -19,7 +19,7 @@ export default function FormSelectAsync<
   rounded = false,
   forMobile = false,
   ...props
-}: AsyncProps<T, OptionType, IsMulti>): JSX.Element {
+}: AsyncProps<T, OptionType, IsMulti>): ReactElement {
   const styles = getCustomStyles<T, OptionType, IsMulti>(
     mono,
     light,
diff --git a/packages/components/src/FormSelect/Grouped.tsx b/packages/components/src/FormSelect/Grouped.tsx
index e61e87b5..3d60af77 100644
--- a/packages/components/src/FormSelect/Grouped.tsx
+++ b/packages/components/src/FormSelect/Grouped.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 import Select from "react-select";
 import Wrapper from "./Wrapper";
 import { getComponentsForGroup } from "./components";
@@ -21,7 +21,7 @@ export default function FormSelectGrouped<
   forMobile = false,
   selectedOptionFirst = false,
   ...props
-}: GroupedProps<T, OptionType, IsMulti>): JSX.Element {
+}: GroupedProps<T, OptionType, IsMulti>): ReactElement {
   const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);
 
   const styles = getCustomStyles<T, OptionType, IsMulti>(
diff --git a/packages/components/src/FormSelect/components/Menu.tsx b/packages/components/src/FormSelect/components/Menu.tsx
index 7db8ae24..8b5007ca 100644
--- a/packages/components/src/FormSelect/components/Menu.tsx
+++ b/packages/components/src/FormSelect/components/Menu.tsx
@@ -78,12 +78,13 @@ export default function Menu<
   ...props
 }: MenuProps<OptionType, IsMulti, CustomGroupBase<OptionType>> &
   GroupIndexProps) {
+  const MenuComponent = components.Menu as any;
   return (
-    <components.Menu {...props}>
+    <MenuComponent {...props}>
       <Tabs {...props} options={props.selectProps.options} />
       {children}
       <GroupNoOptions {...props} options={props.selectProps.options} />
       <Footer {...props} options={props.selectProps.options} />
-    </components.Menu>
+    </MenuComponent>
   );
 }
diff --git a/packages/components/src/FormSelect/components/MenuList.tsx b/packages/components/src/FormSelect/components/MenuList.tsx
index 05475ff2..2b8b15c2 100644
--- a/packages/components/src/FormSelect/components/MenuList.tsx
+++ b/packages/components/src/FormSelect/components/MenuList.tsx
@@ -30,9 +30,10 @@ export default function MenuList<
     return (group.props as any).data?.label === activeGroup?.label;
   });
 
+  const MenuListComponent = components.MenuList as any;
   return (
-    <components.MenuList {...props} className={css.menuList}>
+    <MenuListComponent {...props} className={css.menuList}>
       {filteredChildren}
-    </components.MenuList>
+    </MenuListComponent>
   );
 }
diff --git a/packages/components/src/FormSelect/components/NoOptionsMessage.tsx b/packages/components/src/FormSelect/components/NoOptionsMessage.tsx
index 6a73063e..66a5e528 100644
--- a/packages/components/src/FormSelect/components/NoOptionsMessage.tsx
+++ b/packages/components/src/FormSelect/components/NoOptionsMessage.tsx
@@ -11,9 +11,10 @@ export default function NoOptionsMessage<
     noOptionsMsg?: string;
   },
 ) {
+  const NoOptionsMessageComponent = components.NoOptionsMessage as any;
   return (
-    <components.NoOptionsMessage {...props}>
+    <NoOptionsMessageComponent {...props}>
       {props.noOptionsMsg ?? "No options"}
-    </components.NoOptionsMessage>
+    </NoOptionsMessageComponent>
   );
 }
diff --git a/packages/components/src/FormSelect/components/Option.tsx b/packages/components/src/FormSelect/components/Option.tsx
index 9947c457..d7ffc0fa 100644
--- a/packages/components/src/FormSelect/components/Option.tsx
+++ b/packages/components/src/FormSelect/components/Option.tsx
@@ -1,6 +1,6 @@
 import { FiCheck } from "@react-icons/all-files/fi/FiCheck";
 import cx from "classnames";
-import React from "react";
+import React, { ReactElement } from "react";
 import { OptionProps, components } from "react-select";
 import { Option, OptionTypeBase } from "../types";
 import CustomOption from "./CustomOption";
@@ -10,11 +10,12 @@ export default function OptionComponent<
   T,
   OptionType extends Option<T>,
   IsMulti extends boolean,
->(props: OptionProps<OptionType, IsMulti>): JSX.Element {
+>(props: OptionProps<OptionType, IsMulti>): ReactElement {
+  const ReactSelectOption = components.Option as any;
   return (
-    <components.Option {...props}>
+    <ReactSelectOption {...props}>
       <CustomOption data={props.data} labelPrefix="select-option" />
-    </components.Option>
+    </ReactSelectOption>
   );
 }
 
@@ -22,13 +23,14 @@ export function OptionForGroup<
   T,
   OptionType extends OptionTypeBase<T>,
   IsMulti extends boolean,
->(props: OptionProps<OptionType, IsMulti>): JSX.Element {
+>(props: OptionProps<OptionType, IsMulti>): ReactElement {
+  const ReactSelectOptionForGroup = components.Option as any;
   return (
-    <components.Option {...props} className={css.option}>
+    <ReactSelectOptionForGroup {...props} className={css.option}>
       <FiCheck
         className={cx(css.check, { [css.checkInvisible]: !props.isSelected })}
       />
       <CustomOption data={props.data} labelPrefix="select-option" />
-    </components.Option>
+    </ReactSelectOptionForGroup>
   );
 }
diff --git a/packages/components/src/FormSelect/components/SingleValue.tsx b/packages/components/src/FormSelect/components/SingleValue.tsx
index 0d68ae26..8afc69f7 100644
--- a/packages/components/src/FormSelect/components/SingleValue.tsx
+++ b/packages/components/src/FormSelect/components/SingleValue.tsx
@@ -8,9 +8,10 @@ export default function SingleValueComponent<
   OptionType extends Option<T>,
   IsMulti extends boolean,
 >(props: SingleValueProps<OptionType, IsMulti>): ReactNode {
+  const ReactSelectSingleValue = components.SingleValue as any;
   return (
-    <components.SingleValue {...props}>
+    <ReactSelectSingleValue {...props}>
       <CustomOption data={props.data} labelPrefix="single-value" />
-    </components.SingleValue>
+    </ReactSelectSingleValue>
   );
 }
diff --git a/packages/components/src/FormSelect/index.tsx b/packages/components/src/FormSelect/index.tsx
index d476901f..6d01e3c6 100644
--- a/packages/components/src/FormSelect/index.tsx
+++ b/packages/components/src/FormSelect/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import Select from "react-select";
 import FormSelectAsync from "./Async";
 import FormSelectGrouped from "./Grouped";
@@ -27,7 +27,7 @@ function FormSelect<T>({
   rounded = false,
   forMobile = false,
   ...props
-}: Props<T, Option<T>>): JSX.Element {
+}: Props<T, Option<T>>): ReactElement {
   const styles = getCustomStyles<T, Option<T>, false>(
     mono,
     light,
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 457adc33..cc27d1aa 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -11,7 +11,7 @@
     "lib": ["DOM", "ESNext"],
     "module": "ESNext",
     "moduleResolution": "Node",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "emitDeclarationOnly": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
diff --git a/yarn.lock b/yarn.lock
index 5ce68304..13287e23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2513,9 +2513,9 @@ __metadata:
     "@types/jest": "npm:^29.5.14"
     "@types/numeral": "npm:^2"
     "@types/prop-types": "npm:^15"
-    "@types/react": "npm:^19"
+    "@types/react": "npm:19.1.12"
     "@types/react-copy-to-clipboard": "npm:^5"
-    "@types/react-dom": "npm:^19"
+    "@types/react-dom": "npm:19.1.1"
     "@types/react-loader": "npm:^2"
     "@types/rollup-plugin-peer-deps-external": "npm:^2"
     "@typescript-eslint/eslint-plugin": "npm:^8.0.0"
@@ -2539,9 +2539,9 @@ __metadata:
     postcss-preset-env: "npm:^10.2.0"
     prettier: "npm:^3.6.2"
     prop-types: "npm:^15.8.1"
-    react: "npm:^19.1.1"
+    react: "npm:19.1.1"
     react-copy-to-clipboard: "npm:^5.1.0"
-    react-dom: "npm:^19.1.1"
+    react-dom: "npm:19.1.1"
     react-loader: "npm:^2.4.7"
     react-markdown: "npm:^10.0.0"
     react-select: "npm:^5.10.2"
@@ -5063,7 +5063,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*, @types/prop-types@npm:^15":
+"@types/prop-types@npm:^15":
   version: 15.7.15
   resolution: "@types/prop-types@npm:15.7.15"
   checksum: b59aad1ad19bf1733cf524fd4e618196c6c7690f48ee70a327eb450a42aab8e8a063fbe59ca0a5701aebe2d92d582292c0fb845ea57474f6a15f6994b0e260b2
@@ -5079,6 +5079,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:19.1.1":
+  version: 19.1.1
+  resolution: "@types/react-dom@npm:19.1.1"
+  peerDependencies:
+    "@types/react": ^19.0.0
+  checksum: 83833af502f501a372b370fdeb7cf933dfc8780903fe0e0d6e6a76b4ea3adbe5316159a62a0388d8afdd409afd76a40959e2ce82fbb788f57d32c786a63601ee
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:^19":
   version: 19.1.9
   resolution: "@types/react-dom@npm:19.1.9"
@@ -5106,22 +5115,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*":
-  version: 18.3.3
-  resolution: "@types/react@npm:18.3.3"
+"@types/react@npm:*, @types/react@npm:19.1.12, @types/react@npm:^19":
+  version: 19.1.12
+  resolution: "@types/react@npm:19.1.12"
   dependencies:
-    "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: fe455f805c5da13b89964c3d68060cebd43e73ec15001a68b34634604a78140e6fc202f3f61679b9d809dde6d7a7c2cb3ed51e0fd1462557911db09879b55114
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^19":
-  version: 19.1.6
-  resolution: "@types/react@npm:19.1.6"
-  dependencies:
-    csstype: "npm:^3.0.2"
-  checksum: 8b10b198e28997b3c57559750f8bcf5ae7b33c554b16b6f4fe2ece1d4de6a2fc8cb53e7effe08ec9cb939d2f479eb97c5e08aac2cf83b10a90164fe451cc8ea2
+  checksum: e35912b43da0caaab5252444bab87a31ca22950cde2822b3b3dc32e39c2d42dad1a4cf7b5dde9783aa2d007f0b2cba6ab9563fc6d2dbcaaa833b35178118767c
   languageName: node
   linkType: hard
 
@@ -15512,7 +15511,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react-dom@npm:^19.1.1":
+"react-dom@npm:19.1.1, react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react-dom@npm:^19.1.1":
   version: 19.1.1
   resolution: "react-dom@npm:19.1.1"
   dependencies:
@@ -15696,6 +15695,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:19.1.1, react@npm:^19.1.1":
+  version: 19.1.1
+  resolution: "react@npm:19.1.1"
+  checksum: 8c9769a2dfd02e603af6445058325e6c8a24b47b185d0e461f66a6454765ddcaecb3f0a90184836c68bb509f3c38248359edbc42f0d07c23eb500a5c30c87b4e
+  languageName: node
+  linkType: hard
+
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
   version: 19.0.0
   resolution: "react@npm:19.0.0"
@@ -15703,13 +15709,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^19.1.1":
-  version: 19.1.1
-  resolution: "react@npm:19.1.1"
-  checksum: 8c9769a2dfd02e603af6445058325e6c8a24b47b185d0e461f66a6454765ddcaecb3f0a90184836c68bb509f3c38248359edbc42f0d07c23eb500a5c30c87b4e
-  languageName: node
-  linkType: hard
-
 "reactjs-popup@npm:^2.0.6":
   version: 2.0.6
   resolution: "reactjs-popup@npm:2.0.6"