Динамическое рисование нескольких границ с помощью MUI

Это должно помочь решить вашу проблему. Вот рабочий код, пользователь может выбрать цвет с помощью кнопок, но вы можете реализовать то же решение и с раскрывающимися параметрами. https://codesandbox.io/embed/wonderful-worker-g8fzyi?fontsize=14&hidenavigation=1&theme=dark

import { Box } from "@mui/material";
import Button from "@mui/material/Button";
import { useState } from "react";
import "./styles.css";

    export default function App() {
      const [colors, setColors] = useState([]);
      const [pixel, setPixel] = useState(6);
      const addColor = async (color) => {
        setPixel(pixel + 2);
        let randomColor = `0 0 0 ${pixel}px ${color}`;
        setColors([...colors, randomColor]);
      };
    
      return (
        <div
          style = {{
            width: "100vw",
            height: "100vh",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            flexDirection: "column"
          }}
        >
          <Box
            sx = {{
              width: "50%",
              height: "20%",
              border: 3,
              boxShadow: colors.join(",")
            }}
          ></Box>
          <div style = {{ marginTop: 100 }}>
            <Button onClick = {() => addColor("#FFFF00")}>Yellow</Button>
            <Button onClick = {() => addColor("#FF002B")}>Red</Button>
            <Button onClick = {() => addColor("#0000FF")}>Blue</Button>
            <Button onClick = {() => addColor("#2BFF00")}>Green</Button>
          </div>
        </div>
      );
    }