我是react初学者，我想使用主app.js中的formisvalid-from组件。所以，当它为false时，deliverynote组件应该可见，但当它变为true时，它隐藏并显示loadproducts组件

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">Načtěte kód z dodačního listu</label>
          <input type="text" id="delivery_note" ref={deliveryNoteInputRef} />
        </div>
        <div className="actions">
          <button className="button">Potvrdit</button>
        </div>
      </form>
    </Card>
  );
};