How can I make an api call dynamic with react?

How can I use the value from the input form and only make an api call when the button is submitted? Right now when I press submit I am receiving back the user name which is what I expect and want to receive, however it doesn't seem to be sending the information back to userCard. I realize right now I'm not calling it in the form but I'm a bit unsure how to approach this one.

import React,{useEffect, useState} from "react";
import {Form, Button} from "react-bootstrap"
import axios from "axios";
import UserCard from "./Card";



const UserForm = () => {

    const[user, setUser] = useState("");
    const[login, setLogin] =  useState("");
  const handleChange = (e) =>{
        //console.log(e.target.value)
        setUser(e.target.value);
    }

    const handleSubmit = (e) =>{
        //e.preventDefault();
        console.log("Button was submitted",user);
        axios.get(`https://api.github.com/users/${user}`)
        .then((res => 
            {setLogin(res.data);
         
            })
        )
          .catch(err => console.log(err));
    }

    return (
        
        <div className = "Form">
        <Form  onSubmit={handleSubmit} onChange = {handleChange} spellcheck="false" >
       <Form.Group controlId="formName">
            <Form.Label> Github Handle </Form.Label>
            <Form.Control type="text" placeholder="Enter Handle Here" />
        </Form.Group>
        <Button onClick = {handleSubmit}>Submit</Button>
        
        </Form>

        </div>
    )
}

export default UserForm;

import React from "react"
import { NavLink } from "react-router-dom"
import UserForm from "./UserForm"

const UserCard = (props) =>{
        return(
         <div className = "Card">
            <UserForm /> 
            <h1>Hello, {props.login}</h1>
            <h2>How is the weather in {props.location}?</h2>
            <h3>Here's a little about you </h3>
            <p>{props.bio}</p>
            <nav>
            <ul className = "cardlist">
            <li><NavLink to = "/followers" style={{ textDecoration: 'none' }}>Go To Followers</NavLink></li>
            <li><NavLink to = "/repos" style={{ textDecoration: 'none' }}>Go To Repos</NavLink> </li>
            </ul>
            </nav>
            </div>
        )
    }

export default UserCard;

import './App.css';
import React from "react";
import axios from "axios";
import { BrowserRouter, Link, Route } from 'react-router-dom';
import UserCard from "./components/Card";
import Followers from "./components/Followers";
import Repos from "./components/Repos";
import UserForm from "./components/UserForm"

let followerArray = [];

class App extends React.Component {

  state = {
    user: '' ,
    location : '',
    bio: '',
    followers: [],
    repos: []

  }
   
  //make api calls after the component mounts --> equivalent to useEffect()
  //componentDidUpdate is equivalent to useEffect(,[])
  componentDidMount() {
    console.log("Component mounted");
    //get user data
   
        console.log("finished")

        //get repos
       
  }

  render()
  {
  return (
    <BrowserRouter>
    <div className="App">
            <Route exact path = "/">
          <UserCard  name = {this.state.name} 
          login = {this.state.user} 
          location = {this.state.location} 
          bio = {this.state.bio}
          />
    </Route>
    <Route path = "/followers"  followers ={this.state.followers}>
    <Followers />
    </Route>
    <Route path = "/repos">
    <Repos repos={this.state.repos}/>
    </Route>
    </div>
    
    </BrowserRouter>
    

  );
  }
}

export default App;