I need to create a set of card components that should get added up to bottom right of the screen. This card should be created on click of as button and clicking on some other button should add the card next to each other. I am having trouble creating this card component that should stick to the bottom right of the screen.

This is similar to linkedin website chat, that gets shown at the bottom right, and opening a chat will add that to the previously opened card

Can someone help as to how to get started or a simple example of how to add two cards to the bottom right of the screen on clcik of two different buttons?

Link to the sandbox : https://codesandbox.io/s/react-hook-form-with-material-ui-forked-c9o8ck

Code

// App.jsx
import React from "react";
import { Button } from "@material-ui/core";
import { Panel } from "./Panel";

export const App = () => {
  return (
    <>
      <Button>Button1</Button>
      <Button>Button2</Button>
      <Panel />
    </>
  );
};

// Panel.jsx
import React from "react";

export const Panel = () => {
  return <div> Panel Content</div>;
};