How to pass value from one form to another?

Question

I want to design a form which has two input text field. What users type in field 1 will be passed to field 2. How can I do this in Deno Fresh?

Here is my best try:

function passToField2(event){
// What to put here
} 

export default function Home(props) {
  return (
    <div>
      <input
        name = "Field 1" 
        type = "text" 
        onChange={(event) => passToField2(event)}
        ></input>
      <input
        name = "Field 2"
        type = "text" 
        value = {props.valueFromField1} 
    ></input>
    </div>
  );
}

Answer 1

Here is the current code, suggested from https://discord.com/channels/684898665143206084/991511118524715139/1194335634228256828 routes/index.tsx:

import FormIsland from "../islands/form.tsx";

export default function Home() {

  return (
    <div> 
      <FormIsland />
    </div>
  );
}

islands/form.tsx:

import { useState } from "preact/hooks";

export default function FormIsland() {
  const [input, setInput] = useState("");

  return (
    <div>
      <input
        name="Field 1"
        type="text"
        onInput={e => setInput(e.target.value)}
      />
      <input
        name="Field 2"
        type="text"
        value={input}
      />
    </div>
  );
}