I have multiple rows, each row contains two text inputs and a button. When user focuses on one of the inputs, the button should be shown. When elements lose focus, the button should become invisible once again. My best attempt:

```
const Input = ({inputRef}) => {
  return (
    <>
      <h1>Input</h1>
      <input type="text" ref={inputRef}/>
    </>
  )
}

export default () => {
  const firstRef = useRef(null);
  const secondRef = useRef(null);
  const it = useRef(null);

  const [editing, setEditing] = useState(false);

  function handleClick(e) {
    firstRef.current.focus();
  }

  function handleSave() {
    console.log("saving!");
  }

  function checkFocus(e) {
    if (!it.current.contains(document.activeElement)) {
      setEditing(false);
    } else {
      setEditing(true);
    }
  }

  useEffect(() => {
    document.body.addEventListener("focus", checkFocus, true);

    return () => {
      document.body.removeEventListener("focus", checkFocus, true);
    }
  }, []);

  return (
    <div ref={it}>
      <Input inputRef={firstRef}/>
      <Input inputRef={secondRef}/>

      <button type="button" onClick={handleSave} style={{visibility: editing ? "visible" : "hidden"}}>Save</button>
      <button type="button" onClick={handleClick}>Edit</button>
    </div>
  )
}

```

Is there any better/more elegant and efficient way of achieving this?