Sidebar appendTo not working

[amitpatil321]

Describe the bug

I have been trying to make appendTo property work for sidebar but its not working as expected. I the below code i want to open sidebar inside div with white border using appendTo property as mentioned here https://primereact.org/sidebar/#api.Sidebar.props.appendTo

Code

  import { FC, useRef, useState } from 'react';
  import { Button } from 'primereact/button';
  import { Sidebar } from 'primereact/sidebar';
  
  import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css';
  
  export const App: FC = () => {
    const [visible, setVisible] = useState(false);
    const parentRef = useRef<HTMLDivElement>(null);
  
    return (
      <main>
        <Button
          icon="pi pi-arrow-right"
          label="Open Sidebar"
          onClick={() => setVisible(true)}
        />
        <br />
        <br />
        <div
          id="parent"
          style={{
            width: '100%',
            height: '700px',
            border: '1px solid white',
            position: 'relative',
            // overflow: 'hidden',
          }}
          ref={parentRef}
        >
          I am container div
          <Sidebar
            visible={visible}
            onHide={() => setVisible(false)}
            appendTo={parentRef.current}
            // appendTo={'self'}
            position="right"
            blockScroll={false}
            className="w-full"
          >
            <h2>Sidebar Content</h2>
            <p>
              This sidebar is now contained within the white-bordered div. Lorem
              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.
            </p>
          </Sidebar>
        </div>
      </main>
    );
  };
  
  export default App;

Reproducer

Live demo : https://stackblitz.com/edit/vitejs-vite-wdn7e9vx?file=src%2Fmain.tsx,src%2FApp.tsx&terminal=dev

Installed versions

"primereact": "^10.9.6", "react": "^19.1.0", "react-dom": "^19.1.0"

System Information OS Name : Microsoft Windows 11 Home Single Language Processor: Intel I7 8th gen Memory: 16 GB Node js: v20.10.0

Steps to reproduce the behavior

1. Click on button to open the sidebar

Expected Behaviour

1. When we click on button sidebar should open inside div