Referencing lambda environment variable in Cloudformation template throws "circular dependency" error

Question

I have an application that uses an AWS lambda function triggered by an implicit http api event, which gets post/get requests from a React app:

"mylambda": {
      "Type": "AWS::Serverless::Function",
      "Properties": {
        "InlineCode": "exports.handler = async (event, context)",
        "MemorySize": {
          "Ref": "LambdaMemorySize"
        },
        "Handler": "backend/index.handler",
        "Role": {
          "Fn::GetAtt": ["myrole", "Arn"]
        },
        "Timeout": {
          "Ref": "LambdaTimeout"
        },
        "Runtime": "nodejs12.x",
        "FunctionName": "myFunction",
        "Events": {
          "httpapi": {
            "Type": "HttpApi",
            "Properties": {
              "Path": "/myApi",
              "Method": "ANY"
            }
          }
        }
      }
    }
  },

I want to add an environment variable inside the Lambda function for the http-api endpoint so that I can use it in lambda's handler:

"Environment": {
          "Variables": {
           
            "apiEndpoint": {
              "Fn::Join": [
                "",
                [
                  "https://",
                  { "Ref": "ServerlessHttpApi" },
                  ".execute-api.",
                  { "Ref": "AWS::Region" },
                  ".amazonaws.com"
                ]
              ]
            }
          }
        }

The problem is that this throws a circular dependency error and I can see why (lambda relies on api-gateway and api-gateway relies on lambda).

I tried to create the http-api separately but then there seemed to be no way of referencing the api inside lambda as a trigger i.e. when I deploy, the template creates a lambda function that doesn't have my api as a trigger, while my api was created separately.

I know the whole env variables thing can be done easily from the console but my deployment model assumes everything should be done in the CF template.

An answer here suggested:

"You could easily extract the information you need from that event instead of having it as an environment variable, but this depends on your exact use case."

I could do this in the body of the lambda's handler in index.js:

module.exports.apiendpoint = event.requestContext.domainName;

But this will collide with the fact that 1) I can't use index.js variables that are outside React's src folder and 2) I'm not sure how the app will run for the first time since it'll require the get/post request first to trigger lambda.

I think my main problem is simple: I don't know how I can reference the http api endpoint in Lambda's environment variables without throwing an error. Is it that the whole structure of my app is wrong?