Что делает ref и зачем он нужен в iframe?

import React from 'react'

function MyComponent() {
    return (
        <div>
            <p style = {{color: 'red'}}>Testing to see if my component renders!</p>
        </div>
    )
}

export default MyComponent;

Теперь давайте создадим файл CustomIframe.js.

import React, { useState } from 'react'
import { createPortal } from 'react-dom'

const CustomIframe = ({
  children,
  ...props
}) => {
  const [contentRef, setContentRef] = useState(null)

  const mountNode =
    contentRef?.contentWindow?.document?.body

  return (
    <iframe {...props} ref = {setContentRef}>
      {mountNode && createPortal(children, mountNode)}
    </iframe>
  )
}

export default CustomIframe;

1. Что взамен делает ref ? и зачем это нужно? и зачем ставить setContentRef вместо contentRef в ref = {}?

2. Кроме этого, почему {... props} присутствует в теге iframe, когда они нигде не используются?

Я пытался найти ref в Интернете, узнал только об хуке useRef, а не ref

🤔 А знаете ли вы, что...
React имеет строгую систему типов с использованием TypeScript или Flow.