Select tag scrolling does not work

[Nikolasgrizli]

When I open a select with a large number of options and try to scroll with the mouse on desktop or tap on mobile, the whole window scrolls instead of scrolling through the contents of the select.
I have a small site on react and also had the problem getting an instance, so this is implemented as follows:

Some questions I'd be happy to get an answer or advice on:

1. how to get scroll to work on select?
2. is it possible to get an instance like I did (it works, but for example I can't put the focus on the scroll wrapper when loading the page and because of that scrolling with arrows on the keyboard doesn't work).

wrapper.tsx

import React, { FC, useRef, useState } from "react";
import { Header } from "./Header";
import { Scrollbar } from "smooth-scrollbar-react";
import type { Scrollbar as BaseScrollbar } from "smooth-scrollbar/scrollbar";
export const Wrapper: FC<React.PropsWithChildren<any>> = ({ children }) => {
const [isScrolled, setIsScrolled] = useState(false); // some elements are changed when scrollWrapper is scrolled
const scrollbar = useRef<BaseScrollbar | null>(null); // variable for scrollWrapper instance
return (
<div className="page-wrapper ">
    <Header/>
    <Scrollbar
        ref={scrollbar}
        onScroll={(e) => {
        /// some logic
        }}
        alwaysShowTracks
        plugins={{
          overscroll: {
            effect: "glow",
          } as const,
        }}
      >
        <div className="max-h-dvh" id="scrollWrapper">
          {children(scrollbar)}
        </div>
      </Scrollbar>
    </div>
    )

page.tsx

export const IndexPage: React.FC<PageProps> = () => {
return (
    <PageContext.Provider value={{ activePage }}>
      <Wrapper>
        {(scrollBar: {
          current: {
            scrollIntoView: (
              arg0: undefined,
              arg1: { offsetTop: number }
            ) => void;
          };
        }) => {
          return (
          <>
          ...page content
          <select>
          <option>1</option>
          <option>2</option>
          ....
          <option>300</option>
          </select>
          </>
           );
        }}
      </Wrapper>
    </PageContext.Provider>
  );
};