Включение значений массива в атрибуты компонента реакции

У меня есть текстовый компонент со следующим кодом

  return (
    <FormControl variant = "outlined" className = {classes.formControl}>
      <Grid container>
        <TextField
          id = {props.id}
          label = {props.label}
          defaultValue = {props.defaultValue || ""}
          variant = "outlined"
        />
      </Grid>
    </FormControl>
  );

props.attributes - это массив

props.attributes = ['required','disabled']

Я хочу, чтобы атрибуты были атрибутами текстового поля, как показано ниже.

        <TextField
          id = {props.id}
          label = {props.label}
          defaultValue = {props.defaultValue || ""}
          variant = "outlined"
          required
          disabled
        />
     

Я попытался сделать массив атрибутов строкой, используя

const attributes = props.attributes ? props.attributes.join(" ") : "";

а затем вставить строку в атрибуты текстового поля, подобные этому

<TextField
          id = {props.id}
          label = {props.label}
          defaultValue = {props.defaultValue || ""}
          variant = "outlined"
         {...attributes}
        />

Но не помогло