Refs are not available on initial page load - reactjs

Question

I need to create thousands of elements and then perform some work based on their refs.
The problem however is that the refs are all undefined on the initial render. I need them to be available on initial page load.
You can find my codesandbox here. Once you click the button (which forces a rerender), all refs are defined as expected.
Here is the source code for completeness:
import { useRef, useState } from "react";
export default function App() {
const refs = useRef(new Map());
const [bla, setBla] = useState(0);
return (
<>
<button onClick={() => setBla((prevState) => prevState + 1)}>
click me ({bla})
</button>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
<div>
{[...Array(100)].map((_, k) => (
<div key={k} ref={(ref) => refs.current.set(k, ref)}>
{k}
</div>
))}
</div>
<div>
{[...Array(100)].map((_, k) => (
<div key={k}>{refs.current.get(k) ? "defined" : "undefined"}</div>
))}
</div>
</div>
</>
);
}

Answer 1

Solved it with useEffect. (codesandbox)
import { useEffect, useRef, useState } from "react";
export default function App() {
const refs = useRef(new Map());
const outerRef = useRef(null);
const [outerRefLoaded, setOuterRefLoaded] = useState(false);
useEffect(() => {
// setTimeout(() => {
setOuterRefLoaded(outerRef.current !== null);
// }, 5000);
}, [outerRef]);
const [bla, setBla] = useState(0);
return (
<>
<button onClick={() => setBla((prevState) => prevState + 1)}>
click me ({bla})
</button>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
<div ref={outerRef}>
{[...Array(100)].map((_, k) => (
<div key={k} ref={(ref) => refs.current.set(k, ref)}>
{k}
</div>
))}
</div>
<div>
{!outerRefLoaded && "loading..."}
{outerRefLoaded &&
[...Array(100)].map((_, k) => (
<div key={k}>{refs.current.get(k) ? "defined" : "undefined"}</div>
))}
</div>
</div>
</>
);
}