[Solved]-window.Calendly.initInlineWidget is not defined on first load but works after refresh with useEffect in React and Gatsby-Reactjs

Marshall here from Calendly. Since you are using React and Gatsby, you can use the react-calendly package to load the inline embed on your site.

You will need to install the react-calendly package in your project, and then import the InlineWidget like this at the top of your file:

import { InlineWidget } from "react-calendly";

Then, you can use the component on your page:

<InlineWidget url="https://calendly.com/your_scheduling_page" />

I hope this helps! Further documentation can be found in the package readme on Github.