I am trying to pass the value isOpen that is getting updated each time i click my side bar icon. However because its expanding and shrinking i need to adjust the styling based on if the sidebar is open or closed. I am trying to pass the value isOpen to my Home.js, so i can style it accordingly. I tried React.cloneElement but i kept getting errors.

Sidebar.js

import React, { useState } from 'react';
import Bars from '../assets/bars.png';
import HomeIcon from '../assets/home.png';
import LogoutIcon from '../assets/logout.png';
import FriendsIcon from '../assets/friends.png';
import FriendRequest from '../assets/heart.png';
import GroupChats from '../assets/group.png';
import Search from '../assets/search.png';
import { NavLink } from 'react-router-dom';

function Sidebar({ children }) {
    const [isOpen, setIsOpen] = useState(true);
    const toggle = () => setIsOpen(!isOpen);
    const [currMenu, setCurrMenu] = useState("");

    const menuItem = [
        {
            path: "/",
            name: "Home",
            icon: HomeIcon
        },
        {
            path: "/friends",
            name: "Friends",
            icon: FriendsIcon
        },
        {
            path: "/friend-requests",
            name: "Friend Requests",
            icon: FriendRequest
        },
        {
            path: "/group-chats",
            name: "Group Chats",
            icon: GroupChats
        },
        {
            path: "/search-users",
            name: "Search User",
            icon: Search
        },
    ];

    const logoutItem = {
        path: "/login",
        name: "Logout",
        icon: LogoutIcon
    };

    return (
        <div className='sidebar-container'>
            <div className={isOpen ? "open-sidebar" : "close-sidebar"}>
                <div className='top-section'>
                    <h1 className={isOpen ? "logo" : "none"}>MugiwaraChat</h1>
                    <img src={Bars} alt="Menu Bars" className={isOpen ? "open-bars" : "close-bars"} onClick={toggle}/>
                </div>
                {
                    menuItem.map((item, index) => (
                        <NavLink to={item.path} key={index} className={currMenu === item.name ? "active-item-link" : "item-link"} onClick={()=>setCurrMenu(item.name)}>
                            <div>
                                <img src={item.icon} alt="" className='item-icon'/>
                            </div>
                            <div className={isOpen ? "item-text-open" : "item-text-close"}>{item.name}</div>
                        </NavLink>
                    ))
                }
                <div className={isOpen ? "logout-item-open" : "logout-item-close"}>
                    <NavLink to={logoutItem.path} className="item-link">
                        <div className='item-icon'>
                            <img src={logoutItem.icon} alt='' className='item-icon'/>
                        </div>
                        <div className={isOpen ? "item-text-open" : "item-text-close"}>{logoutItem.name}</div>
                    </NavLink>
                </div>
            </div>
            <main>
                {children}
            </main>
        </div>
    );
}

export default Sidebar;

Home.js

import React from 'react';
import Gojo from '../../assets/gojo.jpg';
import Sukuna from '../../assets/sukuna.jpg';
import Luffy from '../../assets/luffy.jpeg';
import Goko from '../../assets/goku.png';
import Yhwach from '../../assets/yhwach.png';
import Chat from '../../assets/chat.png';
import './home.css';

function Home({isOpen}) {

  const testUsers =[
    {
      pfp: Gojo,
      username: "Gojo Saturo",
      bio: "The Strongest Sorcerer You Know :D!",
      status: "Online"
    },
    {
      pfp: Sukuna,
      username: "Ryomen Sukuna",
      bio: "The Strongest Sorcerer of All Time, Also the King of Curses!",
      status: "Online"
    },
    {
      pfp: Luffy,
      username: "Monkey D. Luffy",
      bio: "I am going to be the King of The Pirates, HAHAHAHAHA!",
      status: "Online"
    },
    {
      pfp: Goko,
      username: "Son Goku",
      bio: "Hi i am Goku, I heard you are strong. Lets Spar!",
      status: "Offline"
    },
    {
      pfp: Yhwach,
      username: "Yhwach",
      bio: "The one who will rob you of everything...",
      status: "Offline"
    }
  ];

  console.log("The value of Open is: " + isOpen);



  return (
    <div className='home-container'>
      <h1 className='home-title'>Your Recent Chats:</h1>
      <div className="separator"></div>
      <div className='chat-container'>
          {
            testUsers.map((user) => (
                <div className='chat-item'>
                  <img src={user.pfp} alt='' className='item-pfp'/>
                  <div className='item-details-container'>
                    <h2 className='item-username'>{user.username} <p className="item-status"> • {user.status}</p> </h2>
                    <h2 className='item-bio'>{user.bio}</h2>
                  </div>
                  <button className='item-btn-open'>
                    <img src={Chat} alt="" className="item-btn-icon"/>
                    <p className="item-btnText">Chat</p>
                  </button>
                </div>
            ))
          }

      </div>
    </div>
  );
}

export default Home;

App.js

import React, { useState } from 'react';
import './App.css';
import Sidebar from './components/sidebar';
import Home from './pages/Home/home';
import Friends from './pages/Friends/friends';
import Login from './pages/Login/login';
import FriendRequests from './pages/FriendRequests/friendsRequests';
import GroupChats from './pages/GroupChats/groupChats';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={ <Sidebar> <Home /> </Sidebar>} />
                <Route path="/friends" element={ <Sidebar> <Friends /> </Sidebar> } />
                <Route path="/friend-requests" element={ <Sidebar> <FriendRequests /> </Sidebar> } />
                <Route path="/group-chats" element={ <Sidebar> <GroupChats /> </Sidebar> } />
                <Route path="/login" element={ <Login/> } />
            </Routes>
        </BrowserRouter>
    );
}

export default App;