upd

src/components/Select.tsx

@@ -1,19 +1,35 @@
-import { useState } from 'react';
-import Button from './Button';
-import { useClickAway } from '@uidotdev/usehooks';
-import ArrowDownIcon from './icons/ArrowDownIcon';
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from "react";
+import Button from "./Button";
+import { useClickAway } from "@uidotdev/usehooks";
+import ArrowDownIcon from "./icons/ArrowDownIcon";
 
 interface Props {
-  options: string[];
-  value: string;
-  onChange: (option: string) => void;
+  options: string[]; // ["StroyProject"]
+  onChange: (option: string | undefined) => void;
 }
 
-export default function Select({ options, value, onChange }: Props) {
+export default function Select({ options, onChange }: Props) {
   const [isOpen, setIsOpen] = useState(false);
-
+  const [selectedOption, setSelectedOption] = useState<string | undefined>();
   const ref = useClickAway<HTMLDivElement>(() => setIsOpen(false));
 
+  function handleClickOption(option: string) {
+    setSelectedOption(option);
+    onChange(option);
+    setIsOpen(false);
+  }
+
+  useEffect(() => {
+    console.log(selectedOption);
+  }, [selectedOption]);
+
+  useEffect(() => {
+    if (selectedOption && !options.includes(selectedOption)) {
+      setSelectedOption(undefined);
+    }
+  }, [options]);
+
   return (
     <div
       ref={ref}
@@ -25,10 +41,12 @@ export default function Select({ options, value, onChange }: Props) {
         className="px-[0.833vw] py-[0.417vw] !justify-between w-full"
         onClick={() => setIsOpen(!isOpen)}
       >
-        <p className="text-[0.972vw] leading-[115%]">{value}</p>
+        <p className="text-[0.972vw] leading-[115%]">
+          {selectedOption || "Выберите из списка"}
+        </p>
         <div
           className={`w-[1.389vw] transition-transform h-[1.389vw]${
-            isOpen ? ' rotate-180' : ''
+            isOpen ? "rotate-180" : ""
           }`}
         >
           <ArrowDownIcon />
@@ -42,10 +60,7 @@ export default function Select({ options, value, onChange }: Props) {
               onlyIcon
               variant="tertiary"
               className="px-[0.833vw] py-[0.417vw] !justify-start w-full !first:rounded-t-[0.556vw] !last:rounded-b-[0.556vw]"
-              onClick={() => {
-                onChange(option);
-                setIsOpen(false);
-              }}
+              onClick={() => handleClickOption(option)}
             >
               <div className="flex gap-[0.278vw] items-center">
                 <p className="text-[0.972vw] leading-[115%]">{option}</p>