jsx loading "Loading..." on a jest snapshot and unable to find element

Question

I am trying to get an input tag and do some testing on it using jest/react-testing-library on a Nextjs app. The issue is that I am unable to find an element. I am new to testing, but I know that I can give it something like a data-testid and then getByTestId. The issue here is that I am unable to find that element and that data-testid because instead of showing the input information, like it does with the button, it shows Loading.... If I were to try to grab the button I am able to do it just fine, because that one is rendered just fine unlike the input.

For more context <LoadScript /> and <AutoComplete /> are coming from a library called @react-google-maps/api and that is because this component renders an input tag, and if you start typing a location it will allow you to autocomplete and then search for that location. So it must be those two, and `, that are behaving in a different way and affecting the input tag as this one is in between them.

tsx

return (
    <>
      <div>
        {errors.map((error, idx) => (
          <div key={`${idx + 1}`}>{error}</div>
        ))}
      </div>
      <form onSubmit={onSubmit}>
        <LoadScript
          libraries={libraries}
          googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}
        >
          <Autocomplete data-testid="search-div">
            <input
              ref={inputEl}
              type="text"
              placeholder="Type keywords..."
              required
              data-testid="search-input"
            />
          </Autocomplete>
        </LoadScript>
        <button id="google-search-btn" data-testid="search-btn" type="submit">
          Search
        </button>
      </form>
      {loading && !data && (
        <div>
          <Image
            src="/assets/images/loading-spinner.gif"
            height={50}
            width={50}
          />
        </div>
      )}
      {data?.current && coordinates?.latitude && coordinates?.longitude && (
        <>
          <div>
            <Image
              src={`http:${data.current.condition.icon}`}
              alt="a"
              width={75}
              height={75}
            />
          </div>
          <div>{data.current.tempC}</div>
          <div>{data.current.tempF}</div>
        </>
      )}
    </>
  );

.test.tsx

describe("Testing searchbar content", () => {
  test("expect to render WeatherSearchbar component", () => {
    expect(render(<WeatherSearchbar />)).toMatchSnapshot();
  });
  test("expect to get an error when typing and unknown location", (done) => {
    const { getByTestId } = render(<WeatherSearchbar />);
    const input = getByTestId("search-input");
    console.log("**************", input);
    done();
    // expect(input.ariaPlaceholder).toBe("Type keywords...");
  });
});

component snapshot example showing the Loading... text

<div>
      <div />
      <form>
        <div />
        <div>
          Loading...
        </div>
        <button
          data-testid="search-btn"
          id="google-search-btn"
          type="submit"
        >
          Search
        </button>
      </form>
    </div>

I tried using setTimeout and the done() that comes with jest but it did not work. Any help will be appreciated!