componente independente e reutilizável do React

Quero fazer com que cada menu suspenso seja um componente independente, então se eu clicar em apenas um menu suspenso, ele deve abrir e não o outro, mas aqui neste código, quando clico, ambos são abertos ao mesmo tempo, não importa em qual eu clico

interface DropdownProps {
    options: string[];
    onSelect: (option: string) => void;
}

const Dropdown: React.FC<DropdownProps> = ({ options, onSelect }) => {
    const [open, setopen] = useState(false)
    const [selected, setselected] = useState<string | null>(null)
    const handleClick = (option: string) => {
        setselected(option)
        onSelect(option);
        setopen(false)
    }

    return (
        <div className="dropdown m-1.5 bg-neutral-700 text-neutral-100 w-fit rounded-[0.5rem]">
            <button onClick={() => setopen(!open)} className="py-2 px-3">
                {selected || "select option"}
            </button>
            {
                open && options.map((option, index) => (
                    <li className="py-2 px-3 list-none rounded-[0.5rem] hover:bg-neutral-900" key={index} onClick={() => handleClick(option)}>{option}</li>
                ))
            }
        </div >
    )
}
export default Dropdown


const App = ()=>{
const [selectedOption1, setSelectedOption1] = useState<string | null>(null);
const [selectedOption2, setSelectedOption2] = useState<string | null>(null);

return(
<div className="flex">
                    <Dropdown options={["Option A", "Option B", "Option C"]} onSelect={setSelectedOption1} />
                    <Dropdown options={["Option X", "Option Y", "Option Z"]} onSelect={setSelectedOption2} />
                </div>
)
}