React pattern for click-to-edit fields

Im using React 18 w/ functional components, and am looking for a clean re-usable pattern for "click to edit" UIs - this is the UI paradigm where:

1. You have some text
2. Onhover of text, it shows visual treatment indicating the field is editable
3. OnClick on text, the text is swapped for an input field allowing you to edit the text
4. OnBlur of the input, a callback is made to automatically save changes back to the DB and toggle the input back to text

I can do this per input field, but im trying to figure out an a re-usable React component that i can configure w/ the "view" render, the "edit" render, and any callbacks. Part of this is because my inputs will change quite a bit across my app; so ill have inputs, textareas, select fields, etc. Right now, im duplicating tons of code implementing a component for every "editable field".

I was playing around with something like:

<Editable>
  <p>{value}</p>
  <>
    <label>Update the value:</label>
    <input type="text"/>
  </>
</Editable>

...and then access the "view" stage in Editable via children[0] and the edit state via children[1]... but im not sure how to attach handlers to children and its subelements (for example, i'd want to always have children[0].onClick={() => setEditing(true) } and the children[1]'s input to have children[1].onBlur{() => setEditing(false) }` .. or something like that. Also im not sure if i can figure out what elements of children to attach the handlers to if i can even do that programmatically.

Something like this?

import React from 'react';
import './style.css';

let Editable = (props) => {
  let [mode, setMode] = React.useState('view');
  let [value, setValue] = React.useState('Hello');
  // Some other logic maybe ...
  return props.children({ mode, setMode, value, setValue });
};

export default function App() {
  return (
    <div>
      <Editable>
        {({ mode, setMode, value, setValue }) => {
          return mode === 'view' ? (
            <p
              onClick={() => {
                setMode('edit');
              }}
            >
              {value}
            </p>
          ) : mode === 'edit' ? (
            <div>
              <input
                onBlur={() => {
                  setMode('view');
                }}
                value={value}
                onChange={(e) => setValue(e.target.value)}
              />
            </div>
          ) : null;
        }}
      </Editable>
    </div>
  );
}

This approach is called render props. It allows to have your custom logic inside the component, and delegate rendering part to the user (while letting the user to consume the custom logic from the component).