React JS - Why are my components within a MAP function not updating with useState?

Question

React JS - Why my components within a MAP function are not updating with useState?

I’m in the following situation:

• I receive a contact ARRAY from my API and use the MAP function to return contacts in a Modal component
• Within the MAP function, I created a condition: If the user ID is contained in the array, it is to return the selected Radioinput icon, otherwise the empty Radioinput
• The only problem with my logic is that the user ID is being stored in the array, but in the application the buttons are not being changed. Searching a little, I discovered that maybe it is because MAP render only once, so when I close and open Modal again, the buttons suffer the change, but I wanted you to update on time. Can anyone help me with that? Thank you!

Note: I am using the following libraries:
UI material
React-Modal
Axios

const getContacts = () => {
    setIsLoading(true);
    api.get('/contatos/listar').then((response) => {
        const data = {
            "data": response.data.contatos,
            "selected": []
        }
        setContatos(data);
    }).catch((error) => {
        console.log(error);
    })
}

export const GrantAccess = props => {
    return (
        <Modal isOpen={props.isOpen} onRequestClose={props.onRequestClose} style={grantAccessStyles}>
            <Grid>
                <Typography>Lista de Contatos</Typography>
                {props.contatos ? props.contatos.data.map((item) => (
                    <div key={item.id}>
                        <Avatar>{item.name[0]}</Avatar>
                        <Typography>{item.name}</Typography>
                        {props.contatos.selected.indexOf(item.id) !== -1 ? (
                            <ImRadioChecked
                                onClick={() => {
                                    let array = props.contatos;
                                    let index = array.selected.indexOf(item.id);
                                    array.selected.splice(index, 1);
                                    props.setContatos(array);
                                }}
                            />
                        ) : (
                            <ImRadioUnchecked
                                onClick={() => {
                                    let array = props.contatos;
                                    array.selected.push(item.id);
                                    props.setContatos(array);
                                }}
                            />
                        )}
                    </div>
                )) : null}
            </Grid>
        </Modal >
    )
}

• PARENT COMPONENT

const [contatos, setContatos] = React.useState(); // Contatos disponíveis

<GrantAccess
    isOpen={isOpen}
    onRequestClose={closeModal}
    contatos={contatos}
    setContatos={setContatos}
/>

This is the modal that lists the contacts

And the checkbox update only happens if I close Modal and open again