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

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?