select react로 custom 하기 (기존 select option 사용 x)

import React, { useState } from "react";
import "../../../App.css";
import "../../../pages/css부분/select/select.css";
const SelectCustom = () => {
  const options = ["select1", "select2", "select3"];
  const [optionActive, setOptionActive] = useState(false);
  const [selectedText, setSelectedText] = useState("");
  return (
    <div className="relative layout ">
      <div
        className="noticeLayout"
        onClick={() => {
          setOptionActive(!optionActive);
        }}
      >
        <span>{selectedText !== "" ? selectedText : "-"}</span>
        <img
          className={optionActive ? "noticeup" : "noticedown"}
          src="/images/svg/down.svg"
        />
      </div>
      {optionActive && (
        <>
          <ul className="optionLayout">
            {options.map((option) => (
              <li
                key={option}
                className="option_custom"
                onClick={() => {
                  setSelectedText(option);
                  setOptionActive(false);
                }}
              >
                {option}
              </li>
            ))}
          </ul>
        </>
      )}
    </div>
  );
};

export default SelectCustom;

///select.css

.noticeLayout {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid;
  border-radius: 10px;
  z-index: 1;
  cursor: pointer;
}
.optionLayout {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  position: absolute;
  top: 75px;
  left: 0;
  padding: 12px;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-radius: 0 0 10px 10px;
  background-color: white;
}

.option_custom {
  padding: 10px 0;
  cursor: pointer;
}
.option_custom:hover {
  background-color: rgb(250, 183, 183);
}
/*select animation*/
.noticeup {
  animation: noup 0.5s 1 ease forwards;
}

@keyframes noup {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

.noticedown {
  animation: nodown 0.5s 1 ease forwards;
}

@keyframes nodown {
  from {
    height: rotate(-180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

///App.css
.layout {
  max-width: 48rem;
  margin: 0 auto;
  padding-top: 40px;
}

ul,
li {
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}