This is the child of a parent component PrepaidCard(/index/prepaid-card) and on form submission after success message. I want to route it to parent.

PrepaidCardForm.js

import React, { useState, useEffect, memo } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  Row,
  Col,
  Form,
  Label,
  Input
} from "reactstrap";
import { sha256 } from "js-sha256";
import { useTranslation } from "react-i18next";
import { Redirect, useHistory } from "react-router-dom";
import { swalWithBootstrapButtons } from "../../../utils/sweetalert";
import DatePickers from "react-datepicker";
import PhoneInput from "react-phone-input-2";
import {
  applyPrepaidCard,
  resetApplyPrepaidCard
} from "../../../redux/actions/prepaidCardActions";
import CustomButton from "../../../components/CustomButton/CustomButton.jsx";
import val from "../../../getThemeDetails";
import TACComponent from "../../../components/SignUp/TAC";
import getCitizenShipCode from "../../../utils/citizenShipCode";
import LoaderButton from "../../../components/CustomButton/LoaderButton";
import Util from "../../../utils/helper";
import ShowPrepaidCards from "../DisplayPrepaidCards/ShowPrepaidCards";
import Layout from "../../../components/Wrappers/Layout";

const PrepaidCardForm = 
  () => {
    const origin = "prepaidCard";
    const docTypes = [
      { id: 1, type: "Passport" },
      { id: 2, type: "National ID Card" },
      { id: 3, type: "Driving License" }
    ];
    const login = useSelector(state => state.login);
    const [title, setTitle] = useState("Mr");
    const [countryCode, setCountryCode] = useState("+91");
    const [idProofType, setIdProofType] = useState("1");
    const [states, setStates] = useState({
      firstName: "",
      lastName: "",
      contactNumber: "",
      dateOfBirth: "",
      addressLine: "",
      city: "",
      zip: "",
      ssn: "",
      idDocumentNumber: "",
      idIssuer: ""
    });
    const { t } = useTranslation();
    const [spinner, setSpinner] = useState(false);
    const [issuerDate, setIssuerDate] = useState(new Date());
    const [expiryDate, setExpiryDate] = useState(new Date());
    const [TACLinkClicked, setTACLinkClicked] = useState(false);
    const [tos, setTos] = useState(false);
    const dispatch = useDispatch();
    const applyPrepaidCardState = useSelector(state => state.applyPrepaidCard);
    const getPrepaidCardState = useSelector(state => state.getPrepaidCard)
    const history = useHistory();

    useEffect(() => {
      history.push("/index/prepaid-card-from")
    }, [])

    useEffect(() => {
      if (applyPrepaidCardState.success) {
        swalWithBootstrapButtons.fire({
          type: "success",
          title: "Success",
          text: applyPrepaidCardState.status,
          onClose: () => {
            dispatch(resetApplyPrepaidCard());
            return history.push("/index/prepaid-card")
          }
        });
      }

      if (applyPrepaidCardState.invalidRequest) {
        swalWithBootstrapButtons.fire({
          type: "error",
          title: "Oops!!",
          text: `Something went wrong...please try again`,
          onClose: () => dispatch(resetApplyPrepaidCard())
        });
      }

      if (applyPrepaidCardState.failed) {
        swalWithBootstrapButtons.fire({
          type: "error",
          title: "Oops!!",
          text: applyPrepaidCardState.status,
          onClose: () => {
            dispatch(resetApplyPrepaidCard());
          }
        });
      }
    }, [applyPrepaidCardState]);

    const handleDOB = date => {
      setStates(prevState => ({
        ...prevState,
        dateOfBirth: date
      }));
    };

    const handleChange = ({ target: { value, name } }) => {
      setStates(prevState => ({
        ...prevState,
        [name]: value
      }));
    };

    const handleContact = (value, data) => {
      setCountryCode(data.dialCode);
      setStates(prevState => ({ ...prevState, contactNumber: value }));
    };

    const handleTAC = e => {
      e.preventDefault();
      TACToggle();
    };

    /**
     * @param {string} On TAC Modal, agree/cancel would toggle tos state
     *
     */

    const TACToggle = param => {
      if (param === "Accept") setTos(true);
      else if (param === "Cancel") setTos(false);
      setTACLinkClicked(prev => !prev);
    };

    //If it returns true means apply button is disabled else not
    const disabledButton = () => {
      return !(
        !Object.values(states).some(v => !v) &&
        tos &&
        issuerDate instanceof Date &&
        expiryDate instanceof Date
      );
    };

    const handleApplyPrepaidCard = e => {
      e.preventDefault();
      setSpinner(true);
      const mobileNumber = `00${states.contactNumber}`.replace(/\D+/g, "");
      const formattedDate = Util.formatDate(states.dateOfBirth, true);
      const verificationHash = sha256(
        login.data.secKey +
          login.data.cust_id +
          val.walletOwnerId +
          login.data.cust_email +
          mobileNumber +
          formattedDate
      );
      const req = {
        custId: login.data.cust_id,
        walletOwnerId: val.walletOwnerId,
        email: login.data.cust_email,
        title,
        firstName: states.firstName,
        lastName: states.lastName,
        mobileNumber,
        dateOfBirth: formattedDate,
        addressLine: states.addressLine,
        city: states.city,
        zip: states.zip,
        countryCode: "826",
        citizenshipCode: "100",
        ssn: states.ssn,
        idProofType,
        idDocumentNumber: states.idDocumentNumber,
        idIssuer: states.idIssuer,
        idIssueDate: "2018-01-01T00:00:00",
        idExpriryDate: "2025-01-01T00:00:00",
        verificationHash
      };

      // console.log(req);

      dispatch(applyPrepaidCard(req));
    };
    

    return (
      <div className="content prepaid-card-form">
        <Form onSubmit={handleApplyPrepaidCard}>
          <Row>
            <Col md={12} xs={12}>
              <Card className="card-user">
                <Row>
                  <Col className="border-right" md={6} sm={12}>
                    <CardHeader>
                      <CardTitle>Personal Details</CardTitle>
                    </CardHeader>
                    <hr />
                    <CardBody>
                      <Row>
                        <Col md={3}>
                          <Input
                            type="select"
                            name="title"
                            onChange={({ target: { value } }) =>
                              setTitle(value)
                            }
                            value={title}
                          >
                            {["Mr", "Miss", "Mrs"].map(t => (
                              <option value={t} key={t}>
                                {t}
                              </option>
                            ))}
                          </Input>
                        </Col>
                      </Row>
                      <Row className="mt-2">
                        <Col md={6}>
                          <Label for="firstName">
                            First Name<small className="text-danger">*</small>
                          </Label>
                          <Input
                            type="text"
                            name="firstName"
                            onChange={handleChange}
                            value={states.firstName}
                          />
                        </Col>
                        <Col md={6}>
                          <Label for="firstName">
                            Last Name<small className="text-danger">*</small>
                          </Label>
                          <Input
                            type="text"
                            name="lastName"
                            onChange={handleChange}
                            value={states.lastName}
                          />
                        </Col>
                      </Row>
                      <Row className="mt-4">
                        <Col md={6}>
                          <Label for="mobile">
                            Mobile Number
                            <small className="text-danger">*</small>
                          </Label>
                          <PhoneInput
                            defaultCountry={"in"}
                            onChange={handleContact}
                            enableSearchField={true}
                            value={states.contactNumber}
                          />
                        </Col>
                        <Col md={6}>
                          <Label for="DOB">
                            Date of Birth
                            <small className="text-danger">*</small>
                          </Label>
                          <DatePickers
                            dateFormat="yyyy/MM/dd"
                            onChange={handleDOB}
                            peekNextMonth
                            showMonthDropdown
                            showYearDropdown
                            dropdownMode="select"
                            maxDate={new Date()}
                            className="form-control"
                            selected={states.dateOfBirth}
                          />
                        </Col>
                      </Row>
                    </CardBody>
                  </Col>
                  <Col md={6} sm={12}>
                    <CardHeader>
                      <CardTitle>Address Details</CardTitle>
                    </CardHeader>
                    <hr />
                    <CardBody style={{ marginTop: "3.7rem" }}>
                      <Row>
                        <Col md={12}>
                          <Label for="firstName">
                            Address Line<small className="text-danger">*</small>
                          </Label>
                          <Input
                            type="text"
                            name="addressLine"
                            onChange={handleChange}
                            value={states.addressLine}
                          />
                        </Col>
                      </Row>
                      <Row className="mt-4">
                        <Col md={6}>
                          <Label for="city">
                            City<small className="text-danger">*</small>
                          </Label>
                          <Input
                            type="text"
                            name="city"
                            onChange={handleChange}
                            value={states.city}
                          />
                        </Col>
                        <Col md={6}>
                          <Label for="zipCode">
                            Zip code<small className="text-danger">*</small>
                          </Label>
                          <Input
                            type="text"
                            name="zip"
                            onChange={handleChange}
                            value={states.zip}
                          />
                        </Col>
                      </Row>
                    </CardBody>
                  </Col>
                </Row>
              </Card>
            </Col>
            <Col md={12} xs={12}>
              <Card className="card-user prepaid-card-date">
                <CardHeader>
                  <CardTitle>ID Proof</CardTitle>
                </CardHeader>
                <hr />
                <CardBody className="user-details">
                  <Row>
                    <Col md={4} xs={12}>
                      <Label>SSN Number</Label>
                      <Input
                        type="text"
                        name="ssn"
                        onChange={handleChange}
                        value={states.ssn}
                      />
                    </Col>
                    <Col
                      md={4}
                      sm={12}
                      xs={12}
                      className="d-flex align-items-end"
                    >
                      <Input
                        type="select"
                        name="titles"
                        onChange={({ target: { value } }) =>
                          setIdProofType(value)
                        }
                        style={{ height: "40px" }}
                        value={idProofType}
                      >
                        {docTypes.map(doc => (
                          <option value={doc.id} key={doc.id}>
                            {doc.type}
                          </option>
                        ))}
                      </Input>
                    </Col>
                    <Col md={4} xs={12} sm={12}>
                      <Label for="idDocumentNumber">ID Document Number</Label>
                      <Input
                        type="text"
                        name="idDocumentNumber"
                        onChange={handleChange}
                        value={states.idDocumentNumber}
                      />
                    </Col>
                  </Row>
                  <Row className="mt-4">
                    <Col md={4} xs={12} sm={12}>
                      <Label for="idIssuer">ID Issuer</Label>
                      <Input
                        type="text"
                        name="idIssuer"
                        onChange={handleChange}
                        value={states.idIssuer}
                      />
                    </Col>
                    <Col md={4} xs={12} sm={12}>
                      <Label for="idIssueDate">ID Issue Date</Label>
                      <DatePickers
                        selected={issuerDate}
                        onChange={date => setIssuerDate(date)}
                        showTimeSelect
                        timeFormat="HH:mm"
                        timeIntervals={5}
                        timeCaption="time"
                        dateFormat="MMMM d, yyyy h:mm aa"
                      />
                    </Col>
                    <Col md={4} xs={12} sm={12}>
                      <Label for="idExpiryDate">ID Expiry Date</Label>
                      <DatePickers
                        selected={expiryDate}
                        onChange={date => setExpiryDate(date)}
                        showTimeSelect
                        timeFormat="HH:mm"
                        timeIntervals={5}
                        timeCaption="time"
                        dateFormat="MMMM d, yyyy h:mm aa"
                      />
                    </Col>
                  </Row>
                  <Row className="mt-4 ml-1">
                    <Col md={12}>
                      <Input
                        type="checkbox"
                        name="Tos"
                        onChange={() => setTos(prev => !prev)}
                        value={tos}
                        checked={tos}
                      />
                      <Label for="TAC">
                        <a
                          href="/"
                          style={{ color: "#9A9A9A" }}
                          onClick={handleTAC}
                        >
                          Terms and conditions of Card acceptance
                        </a>
                        <small className="text-danger">*</small>
                      </Label>
                      {TACLinkClicked ? (
                        <TACComponent
                          {...{ TACLinkClicked, TACToggle, origin }}
                        />
                      ) : (
                        ""
                      )}
                    </Col>
                  </Row>
                  <Row className="mt-4">
                    <Col md={12} className="d-flex justify-content-center">
                      <CustomButton
                        color="primary"
                        className="buttons"
                        round
                        disabled={disabledButton()}
                        type="submit"
                      >
                        <LoaderButton
                          isLoading={applyPrepaidCardState.isLoading}
                          spinner={spinner}
                        >
                          Apply
                        </LoaderButton>
                      </CustomButton>
                    </Col>
                  </Row>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }


export default PrepaidCardForm;