(REACT) Passing user data as props into componentDidMount()

Question

I'm still learning the fundamentals of some of the more nuanced topics of React and am reaching an issue when I attempt to pass user input into an API.

What I'm trying to do is take user input from a text box in the parent component and pass the input into the Google Geocode API in a child component. I am currently using componentDidMount() to connect to the geocoder.

GOAL:
inputText(event)-->parent component-->child component(props)-->API(componentDidMount)--->Map

After taking user input, my goal is for the Geocode API to take the user input and translate it into coordinates which will eventually create a marker on a Map.

Currently, I'm able to manually type dummy text string into the variable (loc) which is successful. However, I am seemingly unable to pass props nor state into the child componentDidMount(). My child component is also able to receive the user input props--I just can't update the API with the input.

I believe the life cycle events play a role in the issue, but I can't quite pinpoint it what I'm missing.

Here's my parent function.

    import React, { useState } from "react"
    import List from "./List";
    import "./styles.css";
    import GeoCoder from "./GeoCode";
    
//PARENT FUNCTION

    function Index() {
      const [inputText, setInputText] = useState("");
        let handleInput = (e) => {
            e.preventDefault()
            var lowerCase = e.target.value.toLowerCase();
            setInputText(lowerCase);
        };

//Input changes, triggering handleInput. State of setInputText/inputText is updated.
//InputText is passed to child component GeoCoder

    return (
        <React.Fragment>    
            <form>
            <GeoCoder user={inputText} />
            <input onChange={handleInput} type="text"></input>
            <List location={inputText} />
            </form>
        </React.Fragment>
      );
    }

    export default Index;

The second part below is the child function I am trying to pass the user input to.

import Geocode from "react-geocode";
import React from "react";
import MapAPI from "./Map";

//CHILD FUNCTION

export default class GeoCoder extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      lat: "",
      lng: "",
      user: '',
     
    };
  
  }

//brings in the data for Geocoding
//loc is the variable that will fill with actual data
//need to receive user input as props, 
//and pass the props to my API call

//Sequence of data
//Index --> GeoCoder --> Map
//Need to pass this.props.user or this.state.user into componentDidMount() 

  componentDidMount(props) {
    let loc = this.state.user

    console.log(loc)
    console.log("YOU ARE RECIEVING: " + loc)
    Geocode.setApiKey("AIzaSyDXdV2zeHYYqx6hOxAnDtcWml-EFWWQ40U");
    Geocode.fromAddress(loc).then((response) => {
      let geoLat = response.results[0].geometry.location.lat;
      let geoLng = response.results[0].geometry.location.lng;
      this.setState({
        lat: geoLat,
        lng: geoLng,
        user: loc,
      });

    });
  }

  render(props) {

    return (
      <React.Fragment>
        <h1>{this.props.user}</h1>
        <h1>{this.state.lat}</h1>
        <h1>{this.state.lng}</h1>
        <MapAPI latValue={Number(this.state.lat)} lngValue={Number(this.state.lng)}/>
        <input type="submit"></input>
      </React.Fragment>
    );
  }
}

Let me know if you need any additional information.
Thanks,
-EJS