CURRENTLY

I have created an amplify app with react, and have a component src > components > MyReactComponent.js with a button that when pressed I would like to get data from an external API (that requires auth), and retrieve back to the react component.

The workflow I was building is as follows:

I created a Lambda function in Amplify CLI using amplify add function. This created a function getExternalData in my project structure as follows:

-- amplify
| -- backend
|   -- api/
|   -- auth/
|   -- function
|     -- getExternalData   <--- newly created function
|       -- dist/
|       -- src
|       | -- event.json
|       | -- index.js
|       | -- package-lock.json
|       | -- package.json
|       -- getExternalData-cloudformation-template.json
-- src
  -- components
  | -- MyReactComponent.js
  -- graphql
    -- mutations.js
    -- queries.js
    -- subscriptions.js
    -- schema.json

ISSUE

How do I import this function into MyReactComponent.js?

The dirtiest but most direct (and incorrect) method I could think of was:

import { getExternalData } from "../../amplify/backend/function/getExternalData/getExternalData";

But this returned the error:

Module not found: You attempted to import ../../amplify/backend/function/getExternalData/getExternalDatawhich falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

I feel like ideally I would want the function to be available under graphql folder, but not sure how to automate it being listed there.

REQUEST

Any help to either:

1. Help me import the Lambda function into MyReactComponent.js, or
2. Suggest a better solution for securely getting the external data into react,

would be greatly appreciated :)