Why need setState func Inside useEffect func on this code - react-hooks

Question

import { useRef, useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import styled from 'styled-components'
/** HeaderModal custom hooks */
const useHeaderModal = () => {
const [modalOpened, setModalOpened] = useState(false)
const openModal = () => {
setModalOpened(true)
}
const closeModal = () => {
setModalOpened(false)
}
interface IProps {
children: React.ReactNode
}
const ModalPortal: React.FC<IProps> = ({ children }) => {
const ref = useRef<Element | null>()
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
if (document) {
const dom = document.querySelector('#root-modal')
ref.current = dom
}
}, [])
if (ref.current && mounted && modalOpened) {
return createPortal(
<Container>
<div
className="modal-background"
role="presentation"
onClick={closeModal}
></div>
{children}
</Container>,
ref.current,
)
}
return null
}
return {
openModal,
closeModal,
ModalPortal,
}
}
export default useHeaderModal
This code is custom hook for opening modal.
And I don't understand 'Why need setState func Inside useEffect func on this code?'.
When I eliminate
setMounted(true), ref was not created.
And then in case clicking modal open button
ref was not much created.
When the button is pressed only when the setMounted function
is put in useEffect
The ref is created and then the modal is opened.
Could you please tell me why?