diff --git a/config-ui/src/plugins/components/connection-form/index.tsx b/config-ui/src/plugins/components/connection-form/index.tsx
index 26432cee70f..b61c1d5d076 100644
--- a/config-ui/src/plugins/components/connection-form/index.tsx
+++ b/config-ui/src/plugins/components/connection-form/index.tsx
@@ -110,7 +110,7 @@ export const ConnectionForm = ({ plugin, connectionId, onSuccess }: Props) => {
   const {
     name,
     connection: { docLink, fields, initialValues },
-  } = getPluginConfig(plugin);
+  } = getPluginConfig(plugin) ?? {};
 
   const disabled = useMemo(() => {
     return Object.values(errors).some(Boolean);
@@ -118,6 +118,10 @@ export const ConnectionForm = ({ plugin, connectionId, onSuccess }: Props) => {
 
   const sanitizedCustomHeaders = useMemo(() => sanitizeCustomHeaders(values.customHeaders), [values.customHeaders]);
 
+  if (!plugin || !name) {
+    return null;
+  }
+
   const handleTest = async () => {
     const isUpdate = type === 'update' && !!connectionId;
     await operator(
diff --git a/config-ui/src/routes/connection/connections.tsx b/config-ui/src/routes/connection/connections.tsx
index 62427c45ccd..87b358b9ee9 100644
--- a/config-ui/src/routes/connection/connections.tsx
+++ b/config-ui/src/routes/connection/connections.tsx
@@ -61,8 +61,9 @@ export const Connections = () => {
     setPlugin(plugin);
   };
 
-  const handleShowFormDialog = () => {
+  const handleShowFormDialog = (pluginName?: string) => {
     setType('form');
+    if (pluginName) setPlugin(pluginName);
   };
 
   const handleHideDialog = () => {
@@ -168,7 +169,7 @@ export const Connections = () => {
           <ConnectionList plugin={plugin} onCreate={handleShowFormDialog} />
         </Modal>
       )}
-      {type === 'form' && pluginConfig && (
+      {type === 'form' && plugin && pluginConfig && (
         <Modal
           open
           width={820}