fix(frontend): new api key creation bug (#2774)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/user/components/Settings/ApiKeyConfig/ApiKeyConfig.tsx

@@ -10,6 +10,10 @@ import { useApiKeyConfig } from "./hooks/useApiKeyConfig";
 export const ApiKeyConfig = (): JSX.Element => {
   const { apiKey, handleCopyClick, handleCreateClick } = useApiKeyConfig();
 
+  const createNewApiKey = async () => {
+    await handleCreateClick();
+  };
+
   return (
     <div>
       {apiKey === "" ? (
@@ -17,7 +21,7 @@ export const ApiKeyConfig = (): JSX.Element => {
           iconName="key"
           color="primary"
           label="Create new key"
-          onClick={void handleCreateClick()}
+          onClick={() => createNewApiKey()}
           small={true}
         />
       ) : (