Что сделать, чтобы при дефолтном значении roles = [] массив не создавался заново при каждом рендере?

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

Для readonly-значения подходит:

const EMPTY_ROLES: readonly string[] = [];
// В компоненте:
// const { roles = EMPTY_ROLES } = props;

Так fallback не получает новую ссылку при каждом рендере. Общую константу нельзя изменять. Если массив является локальным состоянием, используйте ленивую инициализацию useState, а не общий изменяемый объект.