How to use let from another component in the main React App?

I am react beginner and I would like to use my formIsValid let from component in the main App.js. So when it is false DeliveryNote component should be visible, but when it changes to true it hides and shows LoadProducts component

The problem is I can't transfer states to another component I know you can use redux or context for it, but I am not pretty sure how

  const deliveryNoteInputRef = useRef();

  const formSubmissionHandler = (event) => {
    event.preventDefault();
    const enteredDeliveryNote = deliveryNoteInputRef.current.value;

    const enteredDeliveryNoteisValid = enteredDeliveryNote.trim() === "1234";

    let formIsValid = false;

    if (enteredDeliveryNoteisValid) {
      formIsValid = true;
      console.log(formIsValid);
    }

    if (!enteredDeliveryNoteisValid) {
      console.log(formIsValid);
      return;
    }
    console.log(enteredDeliveryNote);
  };
  return (
    <Card className="login">
      <form onSubmit={formSubmissionHandler}>
        <div className="control">
          <label htmlFor="delivery_note">Load ID</label>
          <input type="text" id="delivery_note" ref={deliveryNoteInputRef} />
        </div>
        <div className="actions">
          <button className="button">Potvrdit</button>
        </div>
      </form>
    </Card>
  );
};