REACT: Google Maps API - Autocomplete affects input width

Question

I created a React project with Google Maps Api using a npm package @google-maps-react. When I set input width to take up remaining width inside input container it works fine, but when I wrap it inside AutoComplete component it just doesn't work. I have inspected it, and i get a message: The display: block property on the parent element prevents flex from having an effect. Try setting the display: block property on the parent to display: flex. I don't know where to write those styles. Here's the code:

    import { React, useRef, useEffect, useState, Fragment } from "react";
import styles from "./RouteForm.module.css";
import KeyboardDoubleArrowDownRoundedIcon from "@mui/icons-material/KeyboardDoubleArrowDownRounded";
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
import PlaceIcon from "@mui/icons-material/Place";
import {
  GoogleMap,
  useJsApiLoader,
  Autocomplete,
} from "@react-google-maps/api";

const RouteForm = (props) => {
  const [formHeight, setFormHeight] = useState("0");
  const formRef = useRef(null);
  const [origin, setOrigin] = useState("");
  const [destination, setDestination] = useState("");
  const [routeFormVisible, setRouteFormVisible] = useState(false);

  const handleOriginChange = (e) => {
    setOrigin(e.target.value);
  };

  const handleDestinationChange = (e) => {
    setDestination(e.target.value);
  };

  const handleFormSubmit = (e) => {
    e.preventDefault();

    console.log(`Origin: ${origin}, Destination: ${destination}`);
  };

  const toggleFormVisibility = () => {
    setRouteFormVisible(!routeFormVisible);
  };

  const { isLoaded } = useJsApiLoader({
    libraries: ["places"],
  });

  const center = { lat: 42.4414, lng: 19.2624 };

  useEffect(() => {
    if (routeFormVisible) {
      setFormHeight(`${formRef.current.scrollHeight}px`);
    } else {
      setFormHeight("0");
    }
  }, [routeFormVisible]);

  if (!isLoaded) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }

  return (
    <Fragment>
      <div className={styles["form-and-map-container"]}>
        <GoogleMap
          center={center}
          zoom={15}
          mapContainerStyle={{
            width: "100%",
            height: "100%",
          }}
          options={{
            zoomControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            fullscreenControl: false,
          }}
        ></GoogleMap>

        <div className={styles.container}>
          <div className={styles.expand} onClick={toggleFormVisibility}>
            {routeFormVisible ? (
              <CloseRoundedIcon
                fontSize="inherit"
                className={styles["expand-icon"]}
              />
            ) : (
              <KeyboardDoubleArrowDownRoundedIcon
                fontSize="inherit"
                className={styles["expand-icon"]}
              />
            )}
            <span>Create Route</span>
          </div>
          <div
            className={`${styles["form-container"]} ${
              routeFormVisible ? styles["form-visible"] : ""
            }`}
            style={{ maxHeight: formHeight }}
            ref={formRef}
          >
            {routeFormVisible && (
              <form onSubmit={handleFormSubmit}>
                <div className={styles.inputs}>
                  <div className={styles["input1-container"]}>
                    <label>
                      <PlaceIcon />
                    </label>
                    <Autocomplete>
                      <input
                        type="text"
                        value={origin}
                        placeholder="Origin"
                        onChange={handleOriginChange}
                        required
                      />
                    </Autocomplete>
                  </div>
                  <div className={styles["input2-container"]}>
                    <label>
                      <PlaceIcon sx={{ color: "#beff0a" }} />
                    </label>
                    <Autocomplete>
                      <input
                        type="text"
                        value={destination}
                        placeholder="Destination"
                        onChange={handleDestinationChange}
                        required
                      />
                    </Autocomplete>
                  </div>
                </div>
                <div className={styles.btns}>
                  <button type="submit">Create Route</button>
                  <button>Add Stop</button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default RouteForm;


    @font-face {
  font-family: "poppinsregular";
  src: url("./../assets/fonts/poppins-regular-webfont.woff2") format("woff2"),
    url("./../assets/fonts/poppins-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "poppinsitalic";
  src: url("./../assets/fonts/poppins-italic-webfont.woff2") format("woff2"),
    url("./../assets/fonts/poppins-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

.form-and-map-container {
  position: absolute;
  width: 100%;
  height: 100vh;
}

.container {
  padding: 1rem 1.2rem;
  font-family: "poppinsregular", sans-serif;
  display: inline-block;
  width: 21%;
  background-color: #fffdf7;
  border-radius: 15px;
  -webkit-box-shadow: -1px 6px 18px -9px rgba(66, 68, 90, 0.53);
  -moz-box-shadow: -1px 6px 18px -9px rgba(66, 68, 90, 0.53);
  box-shadow: -1px 6px 18px -9px rgba(66, 68, 90, 0.53);
  position: fixed;
  top: 3rem;
  left: 3rem;
}

.expand {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1rem;
  cursor: pointer;
  color: #0a2342;
  margin-bottom: 0;
}

.expand-icon {
  font-size: inherit;
  margin-right: 0.4rem;
}

.input1-container,
.input2-container {
  color: #0a2342;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1rem;
  width: 100%;
}

.input1-container label,
.input2-container label {
  margin-right: 0.4rem;
  width: auto;
}

.input1-container input,
.input2-container input {
  font-family: "poppinsitalic", sans-serif;
  background-color: transparent;
  border: solid 2px #0000000b;
  padding: 0.5rem 0.6rem;
  border-radius: 5px;
  flex: 1;
  font-size: 0.8rem;
  display: inline;
}

.input1-container input:focus,
.input2-container input:focus {
  outline: none;
}

.btns {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.btns button {
  margin-top: 1.5rem;
  font-family: "poppinsregular", sans-serif;
  outline: none;
  background-color: #beff0a;
  color: #0a2342;
  border: none;
  border-radius: 10px;
  padding: 0.7rem 0.7rem;
  cursor: pointer;
  width: 40%;
}

.btns button:first-of-type {
  width: 55%;
  background-color: #0a2342;
  color: #fffdf7;
}

.form-container {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.form-visible {
  max-height: 100%;
}

Please help!