Necesito crear un conjunto de componentes de la tarjeta que deberían agregarse en la parte inferior derecha de la pantalla. Esta tarjeta debe crearse al hacer clic en el botón como y al hacer clic en otro botón debe agregar la tarjeta una al lado de la otra. Tengo problemas para crear este componente de tarjeta que debe quedar en la parte inferior derecha de la pantalla.

Esto es similar al chat del sitio web de Linkedin, que se muestra en la parte inferior derecha, y abrir un chat lo agregará a la tarjeta abierta anteriormente.

¿Puede alguien ayudarme con cómo comenzar o un ejemplo simple de cómo agregar dos tarjetas en la parte inferior derecha de la pantalla al hacer clic en dos botones diferentes?

Enlace a la caja de arena: https://codesandbox.io/s/react-hook-form-with-material-ui-forked-c9o8ck

Código

 // 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>; };