React simple dropdown menu

dropdown.css

.dropdown {
  width: 50%;
  position: relative;
}

.dropdown .dropdown-btn {
  padding: 15px 20px;
  background: #fff;
  box-shadow: 3px 3px 10px 6px rgba(0, 0, 0, 0.06);
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
}

.dropdown .dropdown-content {
  position: absolute;
  top: 110%;
  left: 0;
  padding: 10px;
  background: #fff;
  box-shadow: 3px 3px 10px 6px rgba(0, 0, 0, 0.06);
  font-weight: 500;
  color: #333;
  width: 95%;
}
.dropdown .dropdown-content .dropdown-item {
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.dropdown .dropdown-content .dropdown-item:hover {
  background: #f4f4f4;
}

Dropdown.jsx

import { useState } from "react";
import "./dropdown.css";

const Dropdown = ({ selected, setSelected }) => {
  const [isActive, setIsActive] = useState(false);
  const options = ["Option1", "Option2", "Option3"];

  return (
    <div className="dropdown">
      <div className="dropdown-btn" onClick={() => setIsActive(!isActive)}>
        {selected}
      </div>
      {isActive && (
        <div className="dropdown-content">
          {options.map(option => (
            <div
              key={option}
              onClick={() => {
                setSelected(option);
                setIsActive(false);
              }}
              className="dropdown-item"
            >
              {option}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default Dropdown;

SimpleDropdown.jsx

import { useState } from "react";
import Dropdown from "./Dropdown";

const SimpleDropdown = () => {
  const [selected, setSelected] = useState("Select one");
  
  return (
    <div>
      <h1>Selected: {selected}</h1>
      <Dropdown selected={selected} setSelected={setSelected} />
    </div>
  );
};

export default SimpleDropdown;