const Section = ({ text, changeFn }) => {
  return(
    <>
      <Content text={text} changeFn={changeFn}/>
      <Content text={text} changeFn={changeFn}/>
      <Content text={text} changeFn={changeFn}/>
    </>
  )
}
const Content = ({ changeFn, text }) => {
  const [ textCont, setText ] =useState('text')
  return(
    <>
      <div>{textCont}</div>
      <button onClick={changeFn}>Edit</button>
    </>
  )
}
const Form = ({ changeFn, setContent }) => {
  let inputRef = useRef()
  const applyChangefn = () => {
    setContent(inputRef.current.value)
    changeFn()
  }
  return(
    <>
      <input ref={inputRef}/>
      <button onClick={applyChangefn}>Save</button>
    </>
  )
}

I want to make a component which exists as example with its own usestate in Content component. Then i want to send it multiplied by 3 times into Section component. First question is how to send props between sibling components Second question is how to make 3 same components which have its own useState state. I mean 3 same components with independent usestate.