Потому что нет такого селектора "slider". А если использовать React, то использовать его по-полной и для ссылки на компонент импортировать хук useRef, а не через нативный js
Если используешь реакт, забудь про querySelector. Повесь на тег ref, и лучше смени слайдер, если он не адаптирован под реакт полностью. Keen-slider, например.
document.querySelector выбирает элемент HTML по его названию/класса/ID или комбинаций селекторов, и возвращает ео в качестве объекта, в случае отсутствия элемента в структуре документа querySelector возвращает null.
При использовании querySelector для выборки элемента нужно использовать именно синтаксис селектора, это тоже самое что и в CSS, например есть селектор тега это body, p, blockquote, img и т.д. само название тега является селектором, чтобы выбрать элемент по классу используется точка пример .slider выберет элемент с классом slider, чтобы выбрать элемент по ID используется решетка # пример #slider
В твоем случае ты пытаешься выбрать элемент с названием slider который в принципе даже не существует в стандарте HTML, это одна из причин по которой может получиться результат null.
Если нужно выбрать элемент с ID используй синтаксис селектора ID такой же как в CSS #slider, если бы ты использовал просто getElementById то # можно было бы не писать.
Другая причина по которой может получиться null это рассположение кода, обычно весь скрипт который обрабатывает HTML расспологают в конце перед </body> либо используют атрибуты async/defer или используется событие DOMContentLoaded.