如何在另一个非子组件中使用组件状态作为道具？

Question

我在组件内部有一个表单，当使用useState提交时，该表单会将项目添加到数组中。我想将这些数组值用作另一个组件的select输入中的选项。问题在于没有亲子关系。最好的方法是什么？

生成processes数组的组件：

import React, {useState, useEffect} from 'react';
import {useForm} from 'react-hook-form';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

function AddProcessForm () {

    const {register, handleSubmit, watch, errors} = useForm();
    const [processes, setProcesses] = useState([]);
    const onSubmit = data => {
        setProcesses(processes => [...processes, data])
        console.log(data)
        document.getElementById("process-entry-form").reset();
        }

    useEffect(() =>{
        console.log(processes);
    })

    return (
        <Form id="process-entry-form" onSubmit={handleSubmit(onSubmit)}>
          <Form.Group controlId="" className="mx-2">
            <Form.Label>Add Process</Form.Label>
            <Form.Control name="processname" type="text" placeholder="Enter Process Name" ref={register}/>
          </Form.Group>
          <Button variant="primary" type="submit" className="mb-2">
            Submit
          </Button>
        </Form>
    )
}

export default AddProcessForm;

需要使用processes作为选择选项的组件：

import React from 'react';
import Form from 'react-bootstrap/Form';

function ActivitytoProcessInput () {

    return (
        <Form.Group controlId="" className="mx-2">
        <Form.Label>Belongs to Process</Form.Label>
            <Form.Control as="select">
                <option value="" selected>Select a Process</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </Form.Control>
        </Form.Group>
    )
}

export default ActivitytoProcessInput;