I am facing problem when I am trying to fetch data from firebase. Data is successfully fetched but it is not set to Input fields after fetching

**I am facing a problem when I am trying to fetch data from firebase. Data is successfully fetched but it is not set to Input fields after fetching. Sometimes it is set but after page reloading, it gets reset. Sometimes it shows inside the input field and sometimes it is not. I am not able to find where it goes wrong. For form validation, I have used yup and Formik. I want to populate data in the input field and which is fetched from firebase.**   


import React, { useState, useRef, useEffect } from "react";   
import { auth, firebase } from "../auth/firebase";
import { Formik } from 'formik';
import * as yup from 'yup';
import { useUserAuth } from "../context/UserAuthContext";
//Funcation Component start
const ProfileDashboard = (props) => {
 //User authentication state
  const { user } = useUserAuth();
  const database = firebase.firestore();
  const [userId, setuserId] = useState(null);
  useEffect(() => {
    if (user) {
      setuserId(user.uid)
    }
  }, [])
  //Created state for store talent data which is fetched from firebase
  const [getTalentData, setTalentData] = useState([]);
  //Created state for set initial state yup fields
  const [initialValues, setintialData] = useState({
    talentName: '',
    talentDob: '',
    talentGender: ''
  })
  //To fetch data from firebase
  useEffect(() => {
    database.collection('talentsData').get()
      .then(
        response => {
          getTalentData.length = 0;
          response.docs.forEach(doc => {   
            //Store fetched data        
            getTalentData.push(doc.data());   
            console.log("Get getTalentData", getTalentData);        
          });
        })
      .then(() => {
     //After fetching data it is set to setintialData which will going to set to input field
          getTalentData.forEach((userObj) => {
            console.log("Loop Obj: ", userObj.uid);

//If user is matched then it is set to setintialData state.
if ((userObj.uid).match(userId)) {
setintialData(
{
…initialValues,
talentName: userObj.values.talentName,
talentDob: userObj.values.talentDob,
talentGender: userObj.values.talentGender
}
);
}
console.log(“Loop Init Value: “, initialValues);
})
})
.catch(error => {
console.log(“error”, error);
});
}, [userId]);

  const talName = useRef();
  const talDob = useRef();
  const talGen = useRef();
 
//This is one is validation schema
  const validationSchema = yup.object({
    talentName: yup.string()
      .max(15, 'Name should not exceed 15 Characters')
      .required('Please Enter Name'),
    talentDob: yup.string()
      .required('Please Enter DOB')
      .test(
        "DOB",
        "Please choose a valid date of birth",
        function (value) {
          console.log(value)
        }
      ),
    talentGender: yup.string()
      .required('Please Select Gender'),
  });


  return (
    <>
      <div className="profileDetailsForm">

        <Container>
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={(values, actions) => {
              setTimeout(() => {
                console.log(JSON.stringify(values, null, 2));
                actions.setSubmitting(false);
                firebase.firestore().collection("talentsData").add({
                  values,
                  userId
                })
                  .then(() => {
                    alert("Data save")
                  })
                  .catch((error) => {
                    alert("Error");
                  });
              }, 500);
            }}
          >
            {props => (
              <Form onSubmit={props.handleSubmit}>
                <Row>
                  <Col sm={3} className="my-1">
                    <Form.Group className="mb-3" controlId="profileName">
                      <Form.Label>Name*</Form.Label>
                      <Form.Control
                        placeholder="Name"
                        onChange={(e) => {
                          giveMeBorder(e)
                          props.handleChange(e)
                        }}
                        onBlur={props.handleBlur}
                        value={props.values.talentName}
                        name="talentName"
                      />
                      {props.errors.talentName && <span className="errorMsg">{props.errors.talentName}</span>}
                    </Form.Group>
                  </Col>

                  <Col sm={3} className="my-1">
                    <Form.Group controlId="talentDob">
                      <Form.Label>Date of Birth</Form.Label>
                      <Form.Control
                        type="date"
                        onChange={(e) => {
                          giveMeBorder(e)
                          props.handleChange(e)
                        }}
                        onBlur={props.handleBlur}
                        value={props.values.talentDob}
                        name="talentDob"
                        placeholder="Date of Birth"
                      />
                      {props.errors.talentDob && <span className="errorMsg">{props.errors.talentDob}</span>}
                    </Form.Group>
                  </Col>

                  <Col sm={3} className="my-1">
                    <Form.Label>Gender</Form.Label>
                    <Form.Select
                      aria-label="Default select example"
                      placeholder="Date of Birth"
                      ref={talGen}
                      name="talentGender"
                      type="date"
                      onChange={(e) => {
                        giveMeBorder(e)
                        props.handleChange(e)
                      }}
                      onBlur={props.handleBlur}
                      value={props.values.talentGender}
                    >
                      <option value="">Select</option>
                      <option value="female">Female</option>
                      <option value="male">Male</option>
                      <option value="transgender">Transgender</option>
                    </Form.Select>
                    {props.errors.talentGender && <span className="errorMsg">{props.errors.talentGender}</span>}
                  </Col>
                  
                </Row>
                <div className="d-flex justify-content-end">
                  <div className="profileSubmit float-right">
                    <input type="submit" />
                  </div>
                </div>
              </Form>
            )}

          </Formik>

        </Container>
      </div>
    </>
  );
};

export default ProfileDashboard;