Scrolling in Sheet component

[WorldOfMaze]

I have a Sheet which contain SheetHeader and SheetFooter. When the content does not fit, the Sheet scrolls, which is the behavior that I expect. However, I would like the SheetHeader and SheetFooter to remained fixed at the top and bottom of the screen, with the rest of the content scrolling in between.

Here is a sample of the JSX I am working with:

    <Sheet open={isOpen} onOpenChange={onClose}>
      <SheetContent className="space-y-4 pt-16">
        <SheetHeader>
          <SheetTitle>
            {mode === "add" ? <span>Add Issue</span> : <span>Edit Issue</span>}
          </SheetTitle>
        </SheetHeader>
        <IssueForm />
        <SheetFooter>
          <p>Footer goes here</p>
        </SheetFooter>
      </SheetContent>
    </Sheet>

Is there a way that i can do this?

Thanks.