REACT: Google Maps API - Add Address from Places to Waypoint

Question

I have created a map with three inputs for origin, destination and waypoint using Google Maps API with @React-Google-Maps/api. When I type addresses through places API in origin and destination input it works fine, but when I type in address in waypoint input It's not shown properly. I would like it to display address selected from AutoComplete dropdown menu. Here's my code:

React:

    import { React, useRef, 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 AddCircleIcon from "@mui/icons-material/AddCircle";
import {
  GoogleMap,
  useJsApiLoader,
  Autocomplete,
  DirectionsRenderer,
} from "@react-google-maps/api";

const libraries = ["places"];

const RouteForm = (props) => {
  const originRef = useRef(null);
  const destinationRef = useRef(null);

  const [stopValue, setStopValue] = useState(null);
  const [stopContainerVisible, setStopContainerVisible] = useState(false);
  const [directionsRes, setDirectionsRes] = useState(null);
  const [routeFormVisible, setRouteFormVisible] = useState(false);

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

    console.log(
      `Origin: ${originRef.current.value}, Destination: ${destinationRef.current.value}, Waypoint: ${stopValue}`
    );
  };

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

  const { isLoaded } = useJsApiLoader({
    libraries: libraries,
  });

  const toggleStopVisibility = () => {
    setStopContainerVisible((prevValue) => !prevValue);
    console.log(stopContainerVisible);
  };

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

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

  const wayptAddress = stopValue
    ? [
        {
          location: stopValue,
          stopover: true,
        },
      ]
    : [];

  async function calculateRoute() {
    if (originRef.current.value === "" || destinationRef.current.value === "") {
      return;
    }

    // eslint-disable-next-line no-undef
    const directionService = new google.maps.DirectionsService();
    const results = await directionService.route({
      origin: originRef.current.value,
      destination: destinationRef.current.value,
      // eslint-disable-next-line no-undef
      travelMode: google.maps.TravelMode.DRIVING,
      waypoints: wayptAddress,
    });

    setDirectionsRes(results);
  }

  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,
          }}
        >
          {directionsRes && <DirectionsRenderer directions={directionsRes} />}
        </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 && (
              <form onSubmit={handleRouteSubmit}>
                <div className={styles.inputs}>
                  <div className={styles["input1-container"]}>
                    <label>
                      <PlaceIcon />
                    </label>
                    <Autocomplete className={styles.input}>
                      <input
                        type="text"
                        placeholder="Origin"
                        ref={originRef}
                        required
                      />
                    </Autocomplete>
                  </div>
                  <div className={styles["input2-container"]}>
                    <label>
                      <PlaceIcon sx={{ color: "#beff0a" }} />
                    </label>
                    <Autocomplete className={styles.input}>
                      <input
                        type="text"
                        placeholder="Destination"
                        ref={destinationRef}
                        required
                      />
                    </Autocomplete>
                  </div>
                </div>
                <div className={styles.btns}>
                  <button type="submit" onClick={calculateRoute}>
                    Create Route
                  </button>
                  <span
                    className={styles["add-stop"]}
                    onClick={toggleStopVisibility}
                  >
                    Add Stop
                  </span>
                </div>
                {stopContainerVisible && (
                  <div className={styles["stop-container"]}>
                    <Autocomplete className={styles.input}>
                      <input
                        type="text"
                        placeholder="Stopping place"
                        required
                        onChange={(e) => setStopValue(e.target.value)}
                      />
                    </Autocomplete>
                    <button type="submit" className={styles["stop-submit-btn"]}>
                      <AddCircleIcon />
                    </button>
                  </div>
                )}
              </form>
            )}
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default RouteForm;

CSS:

    @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: 20%;
  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;
  height: auto;
}

.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,
.stop-container {
  color: #0a2342;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1rem;
  width: 100%;
}

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

.input {
  display: flex;
  width: 100%;
}

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

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

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

.btns button,
.btns .add-stop {
  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%;
  text-align: center;
}

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

.stop-submit-btn {
  background-color: transparent;
  border: none;
  color: #0a2342;
  cursor: pointer;
  width: 20%;
}