How to send data from a child component to its sibling?

import Form1 from "../islands/Form1.tsx";
import Form2 from "../islands/Form2.tsx";
import { Form1Provider } from "../islands/Context.tsx";

function App() {
  return (
    <Form1Provider>
      <Form1 />
      <Form2 />
    </Form1Provider>
  );
}

import { createContext } from 'preact'
import { useContext, useState } from "preact/hooks";

export const Form1Context = createContext(null);

export function Form1Provider({ children }) {
  const form1State = useState('Form 1 placeholder');
  return (
    <Form1Context.Provider value={form1State}>{children}</Form1Context.Provider>
  );
}

import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form1() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
    
  return (
    <textarea 
    value = {form1Data} 
    onInput={(event) => setForm1Data(event.target.value)}
    />
  );
}

import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form2() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
  const [form2Data, setForm2Data] = useState('Form 2 placeholder')
    
  return (
    <>
        <textarea 
            value = {form2Data} 
            onInput={(event) => setForm2Data(event.target.value)}
        />
        <p>The value is {form1Data} + {form2Data}</p>
    </>
  );
}