Make sure state is updated before rendering data in React Modal - reactjs

Question

I am using Material-UI component, useState hook and NextJS framework.
I am mapping someData in my render, the structure of a someData element is :
someData[i] : {
"id": number,
"name": string,
"surname": string
}
My problem is to pass mapped data to Modal (specific to the mapped data).
{someData.map((data) => (
<Grid item key={data.id}>
<Card>
<CardContent>
<Typography>
{data.surname} {data.name}'s card.
</Typography>
</CardContent>
<Button
onClick={() => {
setModalData(data);
setOpen(true);
}}
>
Follow
</Button>
<Modal
open={open}
onClose={setOpen(false)}
>
<Box>
<Typography>
Follow {modalData.surname} ?
</Typography>
<Button onClick={() => handleFollowSubmit(modalData)}>
/*Function declared not important here*/
Yes
</Button>
</Box>
</Modal>
</Card>
</Grid>
))}
And the state used here are:
const [open, setOpen] = useState(false); // to handle the Modal opening
const [modalData, setModalData] = useState(null); // to pass Data to the modal
The idea is that you can't pass mapped data to a modal using the mapping, you have to use a State Hook to do so: When you open a modal, you pass the corresponding data through the State Hook.
But when I render the webpage I get this error :
TypeError: Cannot read properties of null (reading 'surname')
Pointing at modalData.surname
Any help would be appreciated!

Answer 1

Just add !!modalData to its open prop?
<Modal
open={!!modalData && open}
onClose={setOpen(false)}
/>

Answer 2

Update:
Initializing modalData like this:
const [modalData, setModalData] = useState({"id": number, "name": string, "surname": string})
solves the problem. I think initializing it with null created an error as the components are rendered before the data is fetched.