[Penpal] Parent: Awaiting handshake

I was trying to create a iframe and communicate back with my react-server

But unable to get a handshake back from iframe/child html which i used as a src connectToChild

Am I missing Something?

Help me out

Source code was below

parent code react js file:-

import React, { useEffect, useRef, useState } from 'react';
import { connectToChild } from 'penpal';

function ParentComponent() {
  const [child, setChild] = useState(null);
  const inputRef = useRef();
  useEffect(() => {
    const iframe = document.createElement('iframe');
    iframe.src = 'src/child.html';

    // Connect to the child iframe
    let connection = connectToChild({
    //   childOrigin:'src/child.html',
      iframe:iframe,
      methods: {
        sendMessage(message) {
          // Handle received messages from the child
          console.log('Received from child:', message);
        },
      },
      debug:true,
    })

    setChild(connection)

    return () => {
    //   connection.destroy();
    };
  }, []);

  const sendMessageToChild = async () => {
    const message = inputRef.current.value;
    console.log("sendMessageToChild--->",message)
    child.promise.then((message) => {
        console.log("childState--->",message)
      message.sendMessage('Hello from parent!');
    });

  };

  return (
    <div>
      <h1>Parent Component</h1>
      <input type="text" ref={inputRef} />
      <button onClick={sendMessageToChild}>Send to Child</button> 
    </div>
  );
}

export default ParentComponent;

child html

<!DOCTYPE html>
<html>
<head>
  <title>Child Component</title>
<script src="https://unpkg.com/penpal@^6/dist/penpal.min.js"></script>

</head>
<body>
  <h1>Child Component</h1>
  <script>
    const button = document.getElementById('myButton');
    console.log('......',Penpal)
    const child = Penpal.connectToParent({
      methods: {
        sendMessage: (message) => {
          return `Received message from parent: ${message}`;
        }
      },
      debug:true
    });

    child.promise.then((parent) => {
          parent.sendMessage('Hello from child!');

      });
  </script>
</body>
</html>

@Aaronius can you help me out

Aaronius / penpal

[Penpal] Parent: Awaiting handshake #91