Help with complex dynamic form

[predofrazao]

I'm working on a BI project that allow users to create their own charts. The problem is that each type of chart (bar, pie, etc) has it's own configuration and I need a way to dynamically show them (based on chart type) together with the static form fields (name, description, chart type, etc). Is basically like how Grafana works in the GIF:

And this is my current layout:

Currently, all my logic exists on CRUD level, and I've created a ChartPicker(chartType) utility, that watches chartType from "Form" and return the properly <Chart /> component, then I render it on "Chart preview" area.

const Chart = chartPicker(watch("chartType"));

<Crud>
  <ChartPreviewArea>
    <Chart />
  </ChartPreviewArea>
 
  <QueryArea />

  <FormArea />
</Crud>

I'm really struggling with this and I would like to know how you guys would do this or any tips on this.

Thanks on advance.