How to use ref both inside and outside(parent) component?

return (
        <div>
            <div class="grid grid-cols-2 border gap-2 mx-auto min-w-[420px] max-w-[840px] px-4">
                {totalPrice()}
                <button onClick={() => myDialog?.showModal()}>Terms!</button>
            </div>

            <Dialog
                text="This is terms of service text text text, do you agree? 12354123135
            5645343 231E"
                ref={myDialog}
            />
        </div>
    );

  function Dialog(props) {
    return (
        <dialog
            onClick={() => {
                props.ref?.close();
            }}
            ref={props.ref}
            class="fixed inset-0 items-center justify-cente p-4"
        >
            <div
                onClick={(e) => e.stopPropagation()}
                class="border min-w-[420px] max-w-xl mx-auto bg-white p-1"
            >
                {props.text}
                <button
                    onClick={() => {
                        props.ref?.close();
                    }}
                >
                    Press me
                </button>
            </div>
        </dialog>
    );
}
export default Dialog;