diff --git a/.gitignore b/.gitignore
index 3a13977e..d8dd4bd7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ testmerge.json
 .env.test.local*
 .env.production.local*
 .DS_Store
+package-lock.json.scripting
diff --git a/agent/package.json b/agent/package.json
index 7a961fc3..efe4dc70 100644
--- a/agent/package.json
+++ b/agent/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fs/ppaas-agent",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "Agent Service for running pewpew tests",
   "main": "dist/src/app.js",
   "scripts": {
diff --git a/common/package.json b/common/package.json
index 408b1eb4..c00ecbf1 100644
--- a/common/package.json
+++ b/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fs/ppaas-common",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "Common Code for the PewPewController and PewPewAgent",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
diff --git a/controller/.storybook/main.ts b/controller/.storybook/main.ts
index 0e7745f0..7400b6d4 100644
--- a/controller/.storybook/main.ts
+++ b/controller/.storybook/main.ts
@@ -1,3 +1,4 @@
+import type { Configuration } from "webpack";
 import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
@@ -19,7 +20,7 @@ const config: StorybookConfig = {
       propFilter: prop => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
     }
   },
-  webpackFinal: (config) => {
+  webpackFinal: (config: Configuration) => {
     if (!config.resolve) { config.resolve = {}; }
     config.resolve.fallback = {
       ...(config.resolve.fallback || {}),
diff --git a/controller/components/YamlEndpoints/index.tsx b/controller/components/YamlEndpoints/index.tsx
index b4b28079..fd0e2a6b 100644
--- a/controller/components/YamlEndpoints/index.tsx
+++ b/controller/components/YamlEndpoints/index.tsx
@@ -17,7 +17,7 @@ import {
   PewPewHeader
 } from "../../types/yamlwriter";
 import { LogLevel, log } from "../../pages/api/util/log";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { QuestionBubble } from "../YamlQuestionBubble";
 import styled from "styled-components";
 import { uniqueId } from "../../pages/api/util/clientutil";
@@ -142,6 +142,10 @@ export const Endpoints = ({ urls, ...props }: EndpointsProps) => {
   const invalidHitRate = !HIT_RATE_REGEX.test(state.hitRate);
   const hitRateStyle: React.CSSProperties = getHitRateStyle(invalidHitRate);
   const hitRateTitle: string | undefined = state.hitRate === "" ? "Please enter a Hit Rate" : (getHitRateTitle(invalidHitRate) || "Update all hit rates");
+
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => addUrl()}>
@@ -167,9 +171,9 @@ export const Endpoints = ({ urls, ...props }: EndpointsProps) => {
           </button>
         </NonFlexSpan>
       </HitratesDiv>
-      <TransitionGroup className="endpoints-section_list">
+      <TransitionGroup className="endpoints-section_list" nodeRef={nodeRef}>
         {Array.from(urlsMap.values()).map((url) => (
-          <CSSTransition key={url.id} timeout={300} classNames="point">
+          <CSSTransition key={url.id} timeout={300} classNames="point" nodeRef={nodeRef}>
             <Urls
               deleteUrl={props.deleteUrl}
               changeUrl={props.changeUrl}
diff --git a/controller/components/YamlLoadPatterns/index.tsx b/controller/components/YamlLoadPatterns/index.tsx
index 0e874943..a5bb2db1 100644
--- a/controller/components/YamlLoadPatterns/index.tsx
+++ b/controller/components/YamlLoadPatterns/index.tsx
@@ -1,6 +1,6 @@
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Checkbox, Div, InputsDiv, Label, Span} from "../YamlStyles";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { PewPewLoadPattern } from "../../types/yamlwriter";
 import QuestionBubble from "../YamlQuestionBubble";
 import { uniqueId } from "../../pages/api/util/clientutil";
@@ -86,6 +86,9 @@ export function LoadPatterns ({ defaultYaml, patterns, ...props }: LoadPatternPr
     props.clearAllPatterns();
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
   <InputsDiv>
     <button onClick={() => props.addPattern(newLoadPattern())}>
@@ -101,13 +104,13 @@ export function LoadPatterns ({ defaultYaml, patterns, ...props }: LoadPatternPr
     <QuestionBubble text="Set Default load and ramp time patterns"></QuestionBubble>
     <Checkbox type="checkbox" id="defaultPatterns" name="defaultPatterns" onChange={handleClickDefault} checked={state.defaultPatterns} />
 
-    <TransitionGroup className="loadPatter-section_list">
+    <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
       {Array.from(loadPatternsMap.values()).map((pewpewPattern: PewPewLoadPattern) => {
         // TODO: Do we want to check if they're greater than 0?
         const validFrom: boolean = !pewpewPattern.from || NUMBER_REGEX.test(pewpewPattern.from);
         const validTo: boolean = NUMBER_REGEX.test(pewpewPattern.to);
         const validOver: boolean = OVER_REGEX.test(pewpewPattern.over);
-        return <CSSTransition key={pewpewPattern.id} timeout={300} classNames="load">
+        return <CSSTransition key={pewpewPattern.id} timeout={300} classNames="load" nodeRef={nodeRef}>
           <Div>
             <Span>
               <Label> From: </Label>
diff --git a/controller/components/YamlLoggers/index.tsx b/controller/components/YamlLoggers/index.tsx
index b84bfba5..63002b38 100644
--- a/controller/components/YamlLoggers/index.tsx
+++ b/controller/components/YamlLoggers/index.tsx
@@ -220,6 +220,9 @@ export function Loggers ({ defaultYaml, ...props }: LoggerProps) {
     modalRef.current?.openModal();
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
     <button onClick={() => props.addLogger(newLogger())}>
@@ -246,9 +249,9 @@ export function Loggers ({ defaultYaml, ...props }: LoggerProps) {
       <QuestionBubble text="test_end logs status errors 500 and above and kills test with too many errors"></QuestionBubble>
       <Checkbox type="checkbox" id={KILL_LOGGER} onChange={handleClickDefault} checked={state.killLogger} />
     </Div>
-    <TransitionGroup className="loadPatter-section_list">
+    <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
       {Array.from(loggerMap.values()).map((logger: PewPewLogger) => (
-        <CSSTransition key={logger.id} timeout={300} classNames="load">
+        <CSSTransition key={logger.id} timeout={300} classNames="load" nodeRef={nodeRef}>
           <BorderDiv>
               <Span style={{paddingBottom: "15px"}}>
                 <label style={{marginRight: "7px"}}> Name: </label>
diff --git a/controller/components/YamlProviders/index.tsx b/controller/components/YamlProviders/index.tsx
index f52482dc..cbd5f3c8 100644
--- a/controller/components/YamlProviders/index.tsx
+++ b/controller/components/YamlProviders/index.tsx
@@ -1,7 +1,7 @@
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Div, InputsDiv} from "../YamlStyles";
 import { ProviderType, ProviderTypes } from "./ProviderTypes";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { PewPewProvider } from "../../types/yamlwriter";
 import QuestionBubble from "../YamlQuestionBubble";
 import styled from "styled-components";
@@ -112,6 +112,9 @@ export function Providers ({ providers, ...props }: ProviderMainProps) {
   //   setState((prevState) => ({...prevState, providers }));
   // };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => addProviderDropDown()}>
@@ -141,9 +144,9 @@ export function Providers ({ providers, ...props }: ProviderMainProps) {
           </ProviderInputsDiv>
         }
       </Div>
-      <TransitionGroup className="loadPatter-section_list">
+      <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
         {Array.from(providersMap.values()).map((provider: PewPewProvider) => (
-          <CSSTransition key={provider.id} timeout={300} classNames="load">
+          <CSSTransition key={provider.id} timeout={300} classNames="load" nodeRef={nodeRef}>
             <ProviderTypes
               deleteProvider={props.deleteProvider}
               changeProvider={props.changeProvider}
diff --git a/controller/components/YamlVars/index.tsx b/controller/components/YamlVars/index.tsx
index bdc3aa15..ac74ac4e 100644
--- a/controller/components/YamlVars/index.tsx
+++ b/controller/components/YamlVars/index.tsx
@@ -9,7 +9,7 @@ import {
   SESSION_ID_DEFAULT
 } from "../../types/yamlwriter";
 import { LogLevel, log } from "../../pages/api/util/log";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import QuestionBubble from "../YamlQuestionBubble";
 import VarsDropDown from "./DropDown";
 import { uniqueId } from "../../pages/api/util/clientutil";
@@ -180,6 +180,9 @@ export function Vars ({ authenticated, defaultYaml, ...props }: VarsProps) {
     }
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => props.addVar(emptyVar())}>
@@ -225,9 +228,9 @@ export function Vars ({ authenticated, defaultYaml, ...props }: VarsProps) {
           <VarsDropDown display={state.devKey} onChange={changeEnvironment} />
         </div>
       </Div>
-      <TransitionGroup className="loadPatter-section_list">
+      <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
         {Array.from(varsMap.values()).map((pewpewVar: PewPewVars) => (
-          <CSSTransition key={pewpewVar.id} timeout={300} classNames="load">
+          <CSSTransition key={pewpewVar.id} timeout={300} classNames="load" nodeRef={nodeRef}>
             <Div>
               <Span>
                 <Label> Name: </Label>
diff --git a/controller/next.config.ts b/controller/next.config.ts
index a7b6e2ac..4891dc04 100644
--- a/controller/next.config.ts
+++ b/controller/next.config.ts
@@ -1,3 +1,4 @@
+import type { Compilation, Compiler, Configuration } from "webpack";
 import { access, symlink } from "fs/promises";
 import CopyPlugin from "copy-webpack-plugin";
 import type { NextConfig } from "next";
@@ -36,12 +37,15 @@ const nextConfig: NextConfig = {
     typedRoutes: true
     // instrumentationHook: true,
   },
-  webpack: (config, { isServer, dir: optionsDir }) => {
+  // Defaults to any but is actually type { import('webpack').Configuration }
+  webpack: (config: Configuration, { isServer, dir: optionsDir }) => {
     const wasmExtensionRegExp = /\.wasm$/;
 
+    if (!config.resolve) { config.resolve = {}; }
+    if (!config.resolve.extensions) { config.resolve.extensions = []; }
     config.resolve.extensions.push(".wasm");
 
-    config.module.rules.forEach((rule: any) => {
+    config.module?.rules?.forEach((rule: any) => {
       (rule.oneOf || []).forEach((oneOf: any) => {
         if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
           // Make file-loader ignore WASM files
@@ -50,6 +54,7 @@ const nextConfig: NextConfig = {
       });
     });
 
+    if (!config.output) { config.output = {}; }
     config.output.webassemblyModuleFilename = "static/wasm/[modulehash].wasm";
     if (!config.experiments) { config.experiments = {}; }
     config.experiments.asyncWebAssembly = true;
@@ -58,6 +63,7 @@ const nextConfig: NextConfig = {
     // Compiling we run into an issue where it can't find the config wasm.
     // On Linux the workaround is to create a symlink to the correct location
     // On Windows, the symlinks fail so we must copy the file
+    if (!config.plugins) { config.plugins = []; }
     config.plugins.push(
       platform() === "win32"
       // https://github.com/vercel/next.js/issues/25852#issuecomment-1727385542
@@ -68,13 +74,12 @@ const nextConfig: NextConfig = {
       })
       // https://github.com/vercel/next.js/issues/25852#issuecomment-1057059000
       : new (class {
-        apply (compiler: any) {
+        apply (compiler: Compiler) {
           compiler.hooks.afterEmit.tapPromise(
             "SymlinkWebpackPlugin",
-            // eslint-disable-next-line @typescript-eslint/no-shadow
-            async (compiler: any) => {
+            async (compilation: Compilation) => {
               if (isServer) {
-                const from = join(compiler.options.output.path, "config_wasm_bg.wasm");
+                const from = join(compilation.options.output.path!, "config_wasm_bg.wasm");
                 const to = join(optionsDir, "../lib/config-wasm/pkg/config_wasm_bg.wasm");
                 // options.dir /.../pewpew/controller
                 // console.log(`from/to: ${from} -> ${to}`);
diff --git a/controller/package.json b/controller/package.json
index c08259a1..77d6b5b6 100644
--- a/controller/package.json
+++ b/controller/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fs/ppaas-controller",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "Controller Service for running pewpew tests",
   "private": true,
   "scripts": {
@@ -127,6 +127,7 @@
     "set-value": "^4.1.0",
     "storybook": "~8.4.0",
     "trim": "^1.0.1",
-    "typescript": "^5.3.0"
+    "typescript": "^5.3.0",
+    "webpack": "^5.0.0"
   }
 }
diff --git a/guide/results-viewer-react/.storybook/main.ts b/guide/results-viewer-react/.storybook/main.ts
index 7148806e..ba311a74 100644
--- a/guide/results-viewer-react/.storybook/main.ts
+++ b/guide/results-viewer-react/.storybook/main.ts
@@ -1,3 +1,4 @@
+import type { Configuration } from "webpack";
 import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
@@ -16,7 +17,7 @@ const config: StorybookConfig = {
       propFilter: prop => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
     }
   },
-  webpackFinal: async config => {
+  webpackFinal: async (config: Configuration) => {
     if (!config.experiments) {
       config.experiments = {};
     }
diff --git a/guide/results-viewer-react/src/components/YamlEndpoints/index.tsx b/guide/results-viewer-react/src/components/YamlEndpoints/index.tsx
index 5eb3e20d..597a4958 100644
--- a/guide/results-viewer-react/src/components/YamlEndpoints/index.tsx
+++ b/guide/results-viewer-react/src/components/YamlEndpoints/index.tsx
@@ -17,7 +17,7 @@ import {
   PewPewHeader
 } from "../../util/yamlwriter";
 import { LogLevel, log } from "../../util/log";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { QuestionBubble } from "../YamlQuestionBubble";
 import styled from "styled-components";
 import { uniqueId } from "../../util/clientutil";
@@ -142,6 +142,9 @@ export const Endpoints = ({ urls, ...props }: EndpointsProps) => {
   const invalidHitRate = !HIT_RATE_REGEX.test(state.hitRate);
   const hitRateStyle: React.CSSProperties = getHitRateStyle(invalidHitRate);
   const hitRateTitle: string | undefined = state.hitRate === "" ? "Please enter a Hit Rate" : (getHitRateTitle(invalidHitRate) || "Update all hit rates");
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => addUrl()}>
@@ -167,9 +170,9 @@ export const Endpoints = ({ urls, ...props }: EndpointsProps) => {
           </button>
         </NonFlexSpan>
       </HitratesDiv>
-      <TransitionGroup className="endpoints-section_list">
+      <TransitionGroup className="endpoints-section_list" nodeRef={nodeRef}>
         {Array.from(urlsMap.values()).map((url) => (
-          <CSSTransition key={url.id} timeout={300} classNames="point">
+          <CSSTransition key={url.id} timeout={300} classNames="point" nodeRef={nodeRef}>
             <Urls
               deleteUrl={props.deleteUrl}
               changeUrl={props.changeUrl}
diff --git a/guide/results-viewer-react/src/components/YamlLoadPatterns/index.tsx b/guide/results-viewer-react/src/components/YamlLoadPatterns/index.tsx
index 75f139d2..60b416ca 100644
--- a/guide/results-viewer-react/src/components/YamlLoadPatterns/index.tsx
+++ b/guide/results-viewer-react/src/components/YamlLoadPatterns/index.tsx
@@ -1,6 +1,6 @@
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Checkbox, Div, InputsDiv, Label, Span} from "../YamlStyles";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { PewPewLoadPattern } from "../../util/yamlwriter";
 import QuestionBubble from "../YamlQuestionBubble";
 import { uniqueId } from "../../util/clientutil";
@@ -86,6 +86,9 @@ export function LoadPatterns ({ defaultYaml, patterns, ...props }: LoadPatternPr
     props.clearAllPatterns();
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
   <InputsDiv>
     <button onClick={() => props.addPattern(newLoadPattern())}>
@@ -101,13 +104,13 @@ export function LoadPatterns ({ defaultYaml, patterns, ...props }: LoadPatternPr
     <QuestionBubble text="Set Default load and ramp time patterns"></QuestionBubble>
     <Checkbox type="checkbox" id="defaultPatterns" name="defaultPatterns" onChange={handleClickDefault} checked={state.defaultPatterns} />
 
-    <TransitionGroup className="loadPatter-section_list">
+    <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
       {Array.from(loadPatternsMap.values()).map((pewpewPattern: PewPewLoadPattern) => {
         // TODO: Do we want to check if they're greater than 0?
         const validFrom: boolean = !pewpewPattern.from || NUMBER_REGEX.test(pewpewPattern.from);
         const validTo: boolean = NUMBER_REGEX.test(pewpewPattern.to);
         const validOver: boolean = OVER_REGEX.test(pewpewPattern.over);
-        return <CSSTransition key={pewpewPattern.id} timeout={300} classNames="load">
+        return <CSSTransition key={pewpewPattern.id} timeout={300} classNames="load" nodeRef={nodeRef}>
           <Div>
             <Span>
               <Label> From: </Label>
diff --git a/guide/results-viewer-react/src/components/YamlLoggers/index.tsx b/guide/results-viewer-react/src/components/YamlLoggers/index.tsx
index 00890175..50f324b7 100644
--- a/guide/results-viewer-react/src/components/YamlLoggers/index.tsx
+++ b/guide/results-viewer-react/src/components/YamlLoggers/index.tsx
@@ -220,6 +220,9 @@ export function Loggers ({ defaultYaml, ...props }: LoggerProps) {
     modalRef.current?.openModal();
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
     <button onClick={() => props.addLogger(newLogger())}>
@@ -246,9 +249,9 @@ export function Loggers ({ defaultYaml, ...props }: LoggerProps) {
       <QuestionBubble text="test_end logs status errors 500 and above and kills test with too many errors"></QuestionBubble>
       <Checkbox type="checkbox" id={KILL_LOGGER} onChange={handleClickDefault} checked={state.killLogger} />
     </Div>
-    <TransitionGroup className="loadPatter-section_list">
+    <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
       {Array.from(loggerMap.values()).map((logger: PewPewLogger) => (
-        <CSSTransition key={logger.id} timeout={300} classNames="load">
+        <CSSTransition key={logger.id} timeout={300} classNames="load" nodeRef={nodeRef}>
           <BorderDiv>
               <Span style={{paddingBottom: "15px"}}>
                 <label style={{marginRight: "7px"}}> Name: </label>
diff --git a/guide/results-viewer-react/src/components/YamlProviders/index.tsx b/guide/results-viewer-react/src/components/YamlProviders/index.tsx
index bd3f9532..10efcf81 100644
--- a/guide/results-viewer-react/src/components/YamlProviders/index.tsx
+++ b/guide/results-viewer-react/src/components/YamlProviders/index.tsx
@@ -1,7 +1,7 @@
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Div, InputsDiv} from "../YamlStyles";
 import { ProviderType, ProviderTypes } from "./ProviderTypes";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { PewPewProvider } from "../../util/yamlwriter";
 import QuestionBubble from "../YamlQuestionBubble";
 import styled from "styled-components";
@@ -112,6 +112,9 @@ export function Providers ({ providers, ...props }: ProviderMainProps) {
   //   setState((prevState) => ({...prevState, providers }));
   // };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => addProviderDropDown()}>
@@ -141,9 +144,9 @@ export function Providers ({ providers, ...props }: ProviderMainProps) {
           </ProviderInputsDiv>
         }
       </Div>
-      <TransitionGroup className="loadPatter-section_list">
+      <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
         {Array.from(providersMap.values()).map((provider: PewPewProvider) => (
-          <CSSTransition key={provider.id} timeout={300} classNames="load">
+          <CSSTransition key={provider.id} timeout={300} classNames="load" nodeRef={nodeRef}>
             <ProviderTypes
               deleteProvider={props.deleteProvider}
               changeProvider={props.changeProvider}
diff --git a/guide/results-viewer-react/src/components/YamlVars/index.tsx b/guide/results-viewer-react/src/components/YamlVars/index.tsx
index e90eefae..d9822b51 100644
--- a/guide/results-viewer-react/src/components/YamlVars/index.tsx
+++ b/guide/results-viewer-react/src/components/YamlVars/index.tsx
@@ -9,7 +9,7 @@ import {
   SESSION_ID_DEFAULT
 } from "../../util/yamlwriter";
 import { LogLevel, log } from "../../util/log";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import QuestionBubble from "../YamlQuestionBubble";
 import VarsDropDown from "./DropDown";
 import { uniqueId } from "../../util/clientutil";
@@ -180,6 +180,9 @@ export function Vars ({ authenticated, defaultYaml, ...props }: VarsProps) {
     }
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => props.addVar(emptyVar())}>
@@ -225,9 +228,9 @@ export function Vars ({ authenticated, defaultYaml, ...props }: VarsProps) {
           <VarsDropDown display={state.devKey} onChange={changeEnvironment} />
         </div>
       </Div>
-      <TransitionGroup className="loadPatter-section_list">
+      <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
         {Array.from(varsMap.values()).map((pewpewVar: PewPewVars) => (
-          <CSSTransition key={pewpewVar.id} timeout={300} classNames="load">
+          <CSSTransition key={pewpewVar.id} timeout={300} classNames="load" nodeRef={nodeRef}>
             <Div>
               <Span>
                 <Label> Name: </Label>
diff --git a/package-lock.json b/package-lock.json
index 35825cc0..7fec4f30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@fs/monorepo",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@fs/monorepo",
-      "version": "3.3.3",
+      "version": "3.3.4",
       "workspaces": [
         "./lib/config-wasm/pkg",
         "./common",
@@ -34,7 +34,7 @@
     },
     "agent": {
       "name": "@fs/ppaas-agent",
-      "version": "3.3.3",
+      "version": "3.3.4",
       "dependencies": {
         "@fs/config-wasm": "*",
         "@fs/ppaas-common": "*",
@@ -73,7 +73,7 @@
     },
     "common": {
       "name": "@fs/ppaas-common",
-      "version": "3.3.3",
+      "version": "3.3.4",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.363.0",
         "@aws-sdk/client-sqs": "^3.363.0",
@@ -110,7 +110,7 @@
     },
     "controller": {
       "name": "@fs/ppaas-controller",
-      "version": "3.3.3",
+      "version": "3.3.4",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.363.0",
         "@aws-sdk/client-secrets-manager": "^3.363.0",
@@ -197,7 +197,8 @@
         "set-value": "^4.1.0",
         "storybook": "~8.4.0",
         "trim": "^1.0.1",
-        "typescript": "^5.3.0"
+        "typescript": "^5.3.0",
+        "webpack": "^5.0.0"
       },
       "engines": {
         "node": "18"
diff --git a/package.json b/package.json
index 9395dc5c..3940a15f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fs/monorepo",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "Service for running pewpew tests",
   "private": true,
   "workspaces": [