Tenho uma tela que possui um modal, e esse modal está sendo atualizado sempre que o useState setName e alterado. Porém o modal e exibido apenas quando o stateModal e true, como faço para impedir essa renderização desnecessaria ?

function tela(){
    const [stateModal, setStateModal] = useState(false);
    const [name, setName] = useState("");

    return (
    <>
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Age</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={name}
            label="Name"
            onChange={setName(e.targe.value)}
          >
                <MenuItem value={10}>Maria</MenuItem>
                <MenuItem value={20}>Leticia</MenuItem>
                <MenuItem value={30}>Isabel</MenuItem>
          </Select>
    </FormControl>
    <Button onclick={setSateModal(true)}>Abrir Modal<Button/>
    <Modal name={name} stateModal={stateModal}/>
    </>
    );
}

function modal({stateModal, name}){

    return (
    <Modal
          open={stateModal}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
        >
          <Box sx={style}>
            <Typography id="modal-modal-title" variant="h6" component="h2">
              {name}
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
          </Box>
    </Modal>);
 }