A Chakra button that inserts text into an input element

InsertButton.tsx

import { Button, ButtonProps } from '@chakra-ui/react';
import { RefObject } from 'react';

export type InsertableElement = HTMLInputElement | HTMLTextAreaElement;

function insertStringAtCursor(target: InsertableElement, insertion: string) {
  const value = target.value;
  const selectionStart = target.selectionStart ?? value.length;
  const selectionEnd = target.selectionEnd ?? selectionStart;
  const start = value.substring(0, selectionStart);
  const end = value.substring(selectionEnd, value.length);
  target.value = start + insertion + end;
  target.selectionStart = selectionStart + insertion.length;
  target.selectionEnd = target.selectionStart;
  target.focus();
  return target.value;
}

export function InsertButton(
  props: ButtonProps & {
    insertion: string;
    target: RefObject<InsertableElement>;
    onInsert?: (value: string) => void;
  }
) {
  const { insertion, target, onInsert, children, ...rest } = props;

  function insert() {
    if (target.current) {
      const newValue = insertStringAtCursor(target.current, insertion);
      onInsert?.(newValue);
    }
  }

  return (
    <Button onClick={insert} {...rest}>
      {children || insertion}
    </Button>
  );
}