Why this state is stuck only in this function even after it gets changed? - NextJS 13.3.0 / React

I have a button to show a modal creating using a dialog html element, this button is stored in a state (thingsToRender) in consquence to a condition (in this case, I simulated the condition in a useEffect hook), and then if someCondition is true, the contents in thingsToRender are rendered. The problems is that checkboxState seems always to be true in handleRevealButtonClick even if its actual value is changed to false in handleCheckboxChange after the checkbox that asks if the modal must not be shown again is checked.

Seems that the problems is in storing the button with the function handleRevealButtonClick in the state thingsToRender, but I didn't find a solution that satifies my requirements, since I need that button to be rendered that way beacuse is contained in a grid item in the real example. So how can I make that button to not get stucked in the previous state of checkboxState?

Here's the minimal reproducible example:

import React, { useEffect, useRef, useState } from 'react'
function Test() 
{
const [checkboxState, setCheckboxState] = useState(true);
const [someCondition, setSomeCondition] = useState(false);
const [thingsToRender, setThingsTorRender] = useState(<h1>Something</h1>);
const dialogRef = useRef(null);
const checkboxRef = useRef(null);
const handleCheckboxChange = () =>
{
const checkbox = checkboxRef.current;
if(checkbox.checked)
{
setCheckboxState(false)
}
else
{
setCheckboxState(true);
}
}
const handleRevealButtonClick = () =>
{
if(checkboxState)
{
const dialog = dialogRef.current;
dialog.showModal();
}
}
const handleCloseButtonClick = () =>
{
const dialog = dialogRef.current;
dialog.close();
}
useEffect(() =>
{
// Problem seems to be here
setThingsTorRender(<button onClick={handleRevealButtonClick}>Reveal modal</button>)
}, [])
return (
<div>
<dialog ref={dialogRef}>
<div>
<input type="checkbox" ref={checkboxRef} onChange={handleCheckboxChange}/> 
<label>Not reveal again?</label>
</div>
<button onClick={handleCloseButtonClick}>Close</button>
</dialog>
{someCondition === true ? <h1>Some stuff</h1> : thingsToRender}
</div>)
}
export default Test;

EDIT: In order to clarify why the button needs to be on a state, I'll show this example closer to the real example (notice that thingsToRender contain elements of a grid that are defined from firebase documents):

    const renderGrid = () =>
{
// query from Firebase
const grid = query.map((document, index) => 
<React.Fragment key={index}>
<div className='grid-item'>{document.data}</div>
<div className='grid-item'>{document.data}</div>
<div className='grid-item'>
<button onClick={handleRevealButtonClick}>Reveal modal</button>
</div>
</React.Fragment>
)
setThingsTorRender(grid)
}
useEffect(() =>
{
renderGrid();
}, [])
return (
<div>
{/* dialog */}
{someCondition === true ? <h1>Some stuff</h1> : <div className='grid-container'> {thingsToRender} </div>}
</div>)

Don't store JSX in state (there's usually no need to). Instead, put your JSX into your return to avoid putting it into state, and then use state to control query so that it rerenders your grid when changed:

<div className='grid-container'>{query.map((doc, index) => 
  <React.Fragment key={index}>
    <div className='grid-item'>{doc.data}</div>
    <div className='grid-item'>{doc.data}</div>
    <div className='grid-item'>
      <button onClick={handleRevealButtonClick}>Reveal modal</button>
    </div>
  </React.Fragment>)
}</div>

If you want, you can put the above into its own Grid component to make this easier to read as pass query as props to it.

To understand why your current approach doesn't work you first need to be clear about what happens when your component rerenders. Upon each rerender, your Test component is executed again, creating a new scope where your state variables, functions, etc. defined within your Test component are recreated again. This means that there are multiple "versions" of the handleRevealButtonClick callback function across different renders of your component. Each version of handleRevealButtonClick only has knowledge of the state values for that particular render of your component that the handleRevealButtonClick was created in.

Your problem is that the <button> you set inside of your useEffect() is created once, on the initial mount of your component (due to the empty dependency array). That means that the onClick callback that you set of handleRevealButtonClick refers to the initial handleRevealButtonClick created on the first render which only knows about the value for the checkbox state from the initial render of your component and not the new value it may be set to.