안녕하세요 코드 질문 합니다 !

import React, { useState } from "react";
import "../styles/Category.css";
import logo from "../assets/logo.png";

const Category = () => {
  const [isSidebarOpen, setSidebarOpen] = useState(false);

  const toggleSidebar = () => {
    setSidebarOpen((prevState) => !prevState);
  };

  return (
    <>
      <div className="header">
        <img src={logo} alt="Logo" className="logo" />
        <button className="menu-button" onClick={toggleSidebar}>
          =
        </button>
      </div>
      <div className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
        <button className="close-button" onClick={toggleSidebar}>
          X
        </button>
        <div className="sidebar-content">
          <h1 className="category-item">회원가입</h1>
          <h1 className="category-item">캘린더</h1>
          <h1 className="category-item">커뮤니티</h1>
          <h1 className="category-item">마이페이지</h1>
        </div>
      </div>
      <div
        className={`overlay ${isSidebarOpen ? "visible" : ""}`}
        onClick={toggleSidebar}
      ></div>
    </>
  );
};

export default Category;

.header {
  display: flex;
  align-items: center;
  padding: 10px;
}

.logo {
  width: 200px;
  height: auto;
  padding-top: 20px;
  cursor: pointer;
}

.menu-button {
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding-right: 20px;
}

.sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
  z-index: 1000;
}

.sidebar.open {
  right: 0;
}

.close-button {
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

.sidebar-content {
  padding: 20px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sidebar.open .sidebar-content {
  opacity: 1;
  transform: translateX(0);
}

.category-item {
  margin: 15px 0;
  font-size: 18px;
  color: #999;
  font-family: "Malgun Gothic", sans-serif;
  cursor: pointer;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.category-item:hover {
  color: black;
  font-weight: bold;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.overlay.visible {
  opacity: 1;
  visibility: visible;
}

리액트 공부하고 있는데 x 버튼을 누르면 사이드바가 닫혀야 되는데 코드 잘 작성한거 같은데 뭐가 문제인지 잘 모르겠어요,, 혹시 코드 한번 봐주실수 있나요 ?