replace react-select with native html select

pairent_frontend_react/package.json

@@ -12,7 +12,6 @@
     "react-awesome-slider": "^4.1.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.0",
-    "react-select": "^5.7.3",
     "react-spinners": "^0.13.8",
     "styled-components": "^6.0.0-rc.1"
   },

pairent_frontend_react/src/pages/IndexPage/index.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import ISVGIcon from '../../components/UI/Icon/SVGIcon';
-import Select from 'react-select';
 import ApartmentsList from "../../components/ApartmentsList";
 import { Filters } from "../../API/Filters";
 
@@ -18,6 +17,13 @@ import constants from "../../constants";
 
 const API_ROOT = constants.API_ROOT;
 
+const Select = styled.select`
+    padding: 6px 10px;
+    border: 1px solid #c2c4c2;
+    border-radius: 6px;
+    box-shadow: 0 2px 2px #00000010
+`;
+
 const SVGIcon = styled(ISVGIcon)`
     margin-left:0;
 `;
@@ -278,10 +284,16 @@ const FiltersForm = (props) => {
                     <SearchBarSpacer />
 
                     <Select
-                        options={apart_sizes}
+                        onChange={e => setState({rooms: apart_sizes[e.target.value]})}
-                        styles={{control: (base) => ({...base, border: 0, outline: 0, background: 0})}}
+                        value={state.rooms.value}
-                        onChange={e => setState({rooms: e})}
+                        >
-                        value={state.rooms} />
+                        
+                        {
+                            apart_sizes.map((size, i) => {
+                                return <option value={size.value} label={size.label} key={i} />;
+                            })
+                        }
+                    </Select>
 
                     <SearchBarSpacer />
 
@@ -321,7 +333,7 @@ const FiltersForm = (props) => {
                     {
                         props.loading ?
                             <>
-                                <HashLoader color='#a1adb3' cssOverride={{marginRight: 6, transform: 'translate(-3px, 2px) scale(1.5)'}} size={14} />
+                                <HashLoader color='#a1adb3' cssOverride={{marginRight: 6, transform: 'translate(-3px, 2px) scale(1.3)'}} size={14} />
                                 Загрузка данных...
                             </> :
                             <>