Как я могу вызвать значение кнопки, которое находится на другой странице?

Я новичок в Reactjs, и я столкнулся с этой проблемой, я сделал функцию ввода на странице номер 1, где я ввожу числовое значение, я вызываю эту функцию на второй странице, где я вызываю функцию и где я также определяю параметры PayPal:

Вход функции первой страницы:

function ButtonBID() {
  return (
    <>
      <div class = "form__group field">
        <input
          type = "input"
          class = "form__field"
          placeholder = "Name"
          name = "bid"
          id = "name"
          required
        />
        <label for = "name" class = "form__label">
          Bid now!
        </label>
      </div>
    </>
  );
}

Затем я вызываю эту функцию на второй странице:

import React, { useRef, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Navbar from '../../Components/Navbar/Navbar'
import Video from '../../Asssets/Video/Video.mp4'
import Table from '../../Components/Table/Table'
import styled from 'styled-components'
import { FirstPositionButton, ButtonBID } from '../../Components/Buttons/Button/Button'

function RankingHome() {

  const paypal = useRef()

  useEffect(() => {
    window.paypal.Buttons({
      createOrder: (data, actions, err) => {
        return actions.order.create({
          intent: "CAPTURE",
          purchase_units: [{
            description: 'Cool looking table',
            amount: {
              currency_code: "EUR",
              value: //**** i would to call the input value here ***//
                    }
          }]
        })
      },
      onApprove: async (data, actions) => {
        const order = await actions.order.capture()
        console.info(order)
      },
      onError: (err) => {
        console.info(err)
      }
    }).render(paypal.current)
  }, [])
  return (
    <>
      <Navbar />
      <HeroContainer>
        <HeroBg>
          <VideoBg src = {Video} type = "video/mp4" autoPlay loop muted playsInline />
        </HeroBg>
        <HeroContent>
          <HeroItems>
            <HeroH1>Who will win?</HeroH1>
            <Table />
            <div className = "flexati">
              <FirstPositionButton />
              <ButtonBID />
              <Link to='/Pay'>
                <i class = "far fa-check onClick = {paypal}"></i>
                <div ref = {paypal}></div>
              </Link>
            </div>
          </HeroItems>
        </HeroContent>
      </HeroContainer>
    </>
  )
}

export default RankingHome

Я хотел бы получить значение «текстового поля» и, наконец, передать его в качестве параметра внутри «суммы» PayPal, спасибо!