React - how to get a value in a different component using watch or a similar method? (SHOPIFY APP)

Question

I'm new to React. I'm trying to build something with a following structure: (https://i.stack.imgur.com/dYUre.png) Sorry can't post pictures as don't have 10 reputation :(

I was trying to replicate suggestion from Pass value of form input to a sibling component in React but it did not work.

My question is: How could I display some value in Overview component, from Form component, every time an input is changed? Any help would be much appreciated!

PARENT CONTAINER

import {
  Box,
  Card,
  Layout,
  Link,
  List,
  Page,
  Text,
  BlockStack,
  Button,
  Form,
  ResourceList,
  TextArea
} from "@shopify/polaris";
import { json } from "@remix-run/node";
import { apiVersion, authenticate } from "../shopify.server.js";
import { useActionData, useLoaderData, useSubmit } from "@remix-run/react";
import ExistingDeal from "../components/ExistingDeal.jsx";
import { render } from "react-dom";
import CreateNewDeal from "../components/CreateNewDeal.jsx";
import DealStyling from "../components/DealStyling.jsx";
import DealBundleView from "../components/DealBundleView.jsx"
import BundleSectionForm from "../components/forms/BundleSectionForm.jsx";
import { FormProvider, useForm } from 'react-hook-form'
import DealSection from "../components/DealSection.jsx";

export default function CreateBundlePage() {
  const dealSections = [
    {
      blockQuantity: 1,
      sectionTitle: "Section 1",
      customText: "Some text 1",
      selectedType: "percentage",
      discountValue: 10,
      label: "Standard"
    },
    {
      blockQuantity: 2,
      sectionTitle: "Section 2",
      customText: "Some text 2",
      selectedType: "percentage",
      discountValue: 15,
      label: "Popular"
    },
    {
      blockQuantity: 3,
      sectionTitle: "Section 3",
      customText: "Some text 3",
      selectedType: "percentage",
      discountValue: 20,
      label: "Best discount"
    }
  ]

  const discountTypes = [
    {
      label: "% off price",
      value: "percentage"
    },
    {
      label: "Sum off price",
      value: "sum"
    },
    {
      label: "Sum off total",
      value: "sumOffTotal"
    }
  ]

  const form = useForm({
    defaultValues: dealSections
  });

  const { reset, watch, setError, clearErrors } = form;
  const formBlock = watch();

  return (
    <Page>
      <ui-title-bar title="Configure your bundles" />
      <FormProvider {...form}>
        <Layout>
          <Layout.Section>
            <Card>
              <CreateNewDeal />
                <ResourceList
                    resourceName={{singular: "dealsection", plural: "dealsections"}}
                    items = {dealSections}
                    renderItem = {(item)=>
                      <DealSection props={item} discountTypes={discountTypes} />
                    }
                    >
                </ResourceList>
            </Card>
            <Card>
              <DealStyling />
            </Card>
            <Card>
              <DealBundleView />
            </Card>
          </Layout.Section>
        </Layout>
        </FormProvider>
    </Page>
  );
}

SECTION

import {
  Box,
  Card,
  Layout,
  Link,
  List,
  Page,
  Text,
  BlockStack,
  Button,
  Form,
  ResourceList
} from "@shopify/polaris";
import React from 'react';
import BundleSectionForm from "./forms/BundleSectionForm";

const DealSection = ({props,discountTypes}) => {

  return(
    <ResourceList.Item>
      <BundleSectionForm props={props} discountTypes={discountTypes}/>
    </ResourceList.Item>
  )
}

export default DealSection

FORM

import {
  Box,
  Card,
  Layout,
  Link,
  List,
  Page,
  Text,
  BlockStack,
  Button,
  Form,
  ResourceList,
  TextField,
  Select,
  InlineGrid
} from "@shopify/polaris";
import {React, useState, useRef} from 'react';
import { useForm, FormProvider, useFormContext } from "react-hook-form"

const BundleSectionForm = ({props, discountTypes}) => {

  const [blockQuantity, setQuantity] = useState(props.blockQuantity);
  const [sectionTitle, setTitle] = useState(props.sectionTitle);
  const [customText, setCustom] = useState(props.customText);
  const [selectedType, setType] = useState(props.selectedType);
  const [discountValue, setDiscountValue] = useState(props.discountValue);
  const [highlightedLabel, setHighlightedLabel] = useState(props.label);

  return (
    <Form name="quantity">
      <Text as="h1" variant="headingMd">Section </Text>
      <InlineGrid gap="200" columns={3}>
        <TextField name="quantity" label="Quantity" type="integer" value={blockQuantity} onChange={(newValue) => setQuantity(newValue)} min={1} required></TextField>
        <TextField label="Section Title" value={sectionTitle} onChange={(newValue) => setTitle(newValue)}></TextField>
        <TextField label="Custom Text" value={customText} onChange={(newValue) => setCustom(newValue)}></TextField>
        <Select label="Discount type" options={discountTypes} value={selectedType} onChange={(newValue) => setType(newValue)}></Select>
        <TextField label="Discount value" type="number" value={discountValue} onChange={(newValue) => setDiscountValue(newValue)}></TextField>
        <TextField label="Highlighted label" value={highlightedLabel} onChange={(newValue) => setHighlightedLabel(newValue)}></TextField>
        </InlineGrid>
    </Form>
  )
}

export default BundleSectionForm

Overview

import {
  Box,
  Card,
  Layout,
  Link,
  List,
  Page,
  Text,
  BlockStack,
  Button,
  Form,
  ResourceList
} from "@shopify/polaris";
import React from 'react';
import "../styles/bundle.css"
import BundleSectionForm from "../components/forms/BundleSectionForm.jsx";
import { useFormContext, useWatch } from "react-hook-form";

const DealBundleView = () => {
  //FIRST NEED TO PRINT INPUT VALUES HERE AND THEN I CAN USE THEM IN RENDER
  return(
      <div className="bundle-main-container">
        <div className="bundles-container">
        </div>
      </div>
  )
}

export default DealBundleView;