Получить доступ к MUI элементу

Есть два компонента из библиотеки MUI

import Slider from "@mui/material/Slider";
import MuiInput from "@mui/material/Input";

const Component = () => {
  const [numberInput, setNumberInput] = useState<number>(1);

  <Slider
    valueLabelDisplay="auto"
    step={1}
    min={1}
    max={20}
    value={numberInput}
    onChange={() => {}}
    data-testid="level-range"
/>

Как мне протестировать корректное значение по умолчанию у компонента? У MUI нельзя получить просто доступ к компоненту через get[что-то]. Для слайдера там есть элемент который отображает текущий уровень. Html который генерирует один этот компонент взорвал мне мозг.

<span  data-testid="level-range"> 
       <span></span>
       <span data-index="0" style="left: 0%;"></span>
       <span aria-hidden="true" data-index="0">1</span>
       <span data-index="1"></span>
       <span aria-hidden="true" data-index="1">2</span>
       
       
       <span 
         data-index="0">
         <input 
          aria-orientation="horizontal" 
          aria-valuemax="20" 
          aria-valuemin="1" 
          type="range" 
          min="1" 
          max="20" 
          step="1" 
          data-index="0" 
          aria-valuenow="4" 
          value="4"
         >
            <span class="MuiSlider-valueLabel css-1kz0hui-MuiSlider-valueLabel" aria hidden="true">
         <span class="MuiSlider-valueLabelCircle">
         <span class="MuiSlider-valueLabelLabel">5</span>
         </span>
         </span>
        </span>
        </span>

Я максимум сократил этот код. Убрал ненужные имена классов инлайновые стили и убрал повторяющийся код. У меня 20 уровней для выбора вот этот html для каждого уровня повторяется

 <span data-index="1"></span>
 <span aria-hidden="true" data-index="1">2</span>

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

<span class="MuiSlider-valueLabelLabel">5</span>

И через его значение уже проверить.

Но как получить к нему доступ.

1. У него нет никакого идентификатора
2. Он инкапсулирован очень глубоко
3. У него нет роля

Только имя класса.

В практике я получил доступ к этому элементу вот так.

test("Значение по умолчанию в слайдере должен быть правильным", () => {
    render(<Question />);
    const element = screen.getByTestId("level-range");
    const a = element.querySelector(".MuiSlider-valueLabelLabel")?.innerHTML;
    console.log(a); // -> 1
});

Но на querySelector в тестах ругается компилятор, говоря что

Avoid direct Node access. Prefer using the methods from Testing Library.

Вопрос: Как мне получить доступ ПРАВИЛЬНО?

Спасибо и на том что дочитали до конца :)