I am looking to send the value from the Form.Control to the button so I can do some logic but I cannot seem to get this value from the input. I tried using reft but I cant use refs in a functional component, so I'm using the textInput. Please help, been stuck for 3 days. thx

import React from "react";
import { Modal, Form, Row, Col, Button } from "react-bootstrap";
import "./Login.css";

export const ForgotPassword = (props) => {
  let textInput = null;

  const handleClick = () => {
    console.log("i am here", textInput.focus());
  };

  return (
    <>
      <Modal
        {...props}
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Forgot Password
          </Modal.Title>
        </Modal.Header>
        <Modal.Body className="show-grid">
          <Form.Label>Please enter your Employee ID.</Form.Label>
          <Row>
            <Col className="lm-qus" md={5}>
              Employee ID:
            </Col>
            <Col md={7}>
              <Form.Control
                type="text"
                required
                name="answer"
                placeholder=""
                ref={(input) => {
                  textInput = input;
                }}
              />
            </Col>
          </Row>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={props.onHide}>Cancel</Button>
          <Button onClick={handleClick} type="submit">
            Continue
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};