fowardRef needed not as obvious

[ar-to]

Describe the bug

Was getting this error when using the modal. In case anyone else gets stuck in how this can be resolved I created this issue so maybe the maintainers can improve the docs a little or even add a quick note on this in the type description for

    /**
     * A function that returns a backdrop component. Useful for custom
     * backdrop rendering.
     *
     * ```js
     *  renderBackdrop={props => <MyBackdrop {...props} />}
     * ```
     */
    renderBackdrop?: (props: RenderModalBackdropProps) => React.ReactNode;

maybe add

**Note:** the component should make sure to apply the provided ref.

To Reproduce

Steps to reproduce the behavior:

1. Setup Modal per https://react-restart.github.io/ui/Modal/
2. tweak css to match since its not included in the docs. This can take some time to get right.
3. clicking the modal and check console
4. See error

Reproducible Example

See steps above

Expected behavior

No console error

Screenshots

Environment (please complete the following information)

• Operating System: macOS 13.2.1
• Browser, Version: Version 112.0.5615.49 (Official Build) (arm64)
• "@restart/ui": "^1.6.2",
• react and nextjs used

    "next": "12.1.0",
    "next-seo": "^5.1.0",
    "next-themes": "^0.0.15",
    "react": "^18.1.0",

How I got it working

import { forwardRef } from 'react';
...

const Backdrop = (props: any) => {
  console.log('>>>backdrop props', props);
  return (
    <div ref={props.ref} {...props} className={modalStyles.Backdrop}></div>
  );
};

// key to work
const BackdropFRef = forwardRef((props) => {
  return <Backdrop {...props} />;
});

function ModalExample(
...
  // from docs
  const renderBackdrop = (props: any) => <Backdrop {...props} />;
  // after
  const renderBackdrop2 = (props: any) => <BackdropFRef {...props} />;

      <Modal
        className={modalStyles.Modalv3}
        show={show}
        onHide={() => setShow(false)}
        onBackdropClick={() => setShow(false)}
        backdrop={true}
        // renderBackdrop={renderBackdrop}
        renderBackdrop={renderBackdrop2}
        aria-labelledby="modal-label"
      >
        <div className={modalStyles.ModalBody}>
          <h4 id="modal-label">Text in a modal</h4>
          <p>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </p>
          <PortalModalExtra />
        </div>
      </Modal>
...

Additional context

Will try to push a PR if I get time and it makes sense. Figured the maintainers may have a better idea in mind for the same result.