Passing form data form one component to another form component using react router

Question

I have two components, Component A and Component B, of each contains forms implemented with formik and yup. I want the data filled(i.e. phone number) in component A to show in phone Number input field in component B. The code i have did not work. Here is my code: Component A:

import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
.
.
.
const initialValues = {
phone: "",
};
.
.
.
<Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={onSubmit}
      >
        <Form className="banner-input">
          <Field
            type="tel"
            id="search-input"
            name="phone"
            placeholder="0000-000-0000"
          />
          <div>
            <ErrorMessage name="phone">
              {(errorMsg) => <div>{error}</div>}
            </ErrorMessage>
            <button type="submit">
              Buy token
            </button>
          </div>
        </Form>
      </Formik>

Component B:

   const Component B = ({ phone }) => {
   .
   .
   .
   <div className="form-group">
      <label className="form-label">Phone Number</label>
      <br />
      <input className="form-input" onChange={phone}/>
    </div>
   .
   .
   .