Javascript 如何从选项窗体更改react中的图形？

我是React的新手，我想根据bootstrap表单生成的表单更改js中生成的两个图形

我在react中的代码如下：

从“React”导入React；
从“react引导/容器”导入容器；
从“反应引导/行”导入行；
从“反应引导/Col”导入Col；
从“/Titulo/Titulo”导入Titulo；
从“react引导/表单”导入表单；
从“/Graficas/Dona_etiquetas”导入Dona_etiquetas；
从“/Graficas/Dona_etiquetas2”导入Dona_etiquetas2”；
从“/Graficas/Linear_etiquetas”导入线性_etiquetas；
从“/Graficas/Tabla_etiquetas”导入Tabla_etiquetas；
从“react router dom”导入{Link}；
从“react”导入{useState}；
函数Seccion1Reporte1（）{
const[optionSelected，setOptionSelected]=useState（'1mes'）；
const handleChange=事件=>{
setOptionSelected（event.target.value）；
}
//const tablaHeader1=[“登记册上的Número”、“错误的Número”、“错误的Etiquetas”、“错误的Mensaje”]；
//const tablaContenido1=[“MT001”、“4”、“blc_aba”、“Campo no es alfanumérico”]；
返回(
选择周期
1 mes
2-11名缅甸人
12缅甸语
)
}
导出默认seccion1报告1您可以有条件地呈现它们：



{optionSelected == "1mes" && <Form.Group style={ optionSelected != '1mes' ? { width: '50%' } : { width: '50%' }}>
                            <Dona_etiquetas />
                        </Form.Group>}
{optionSelected != "1mes" && <Form.Group style={ optionSelected == '1mes' ? { width: '50%' } : { width: '50%' }}>
                            <Dona_etiquetas2 />
                        </Form.Group>}



{optionSelected==“1分钟”&&
}
{optionSelected！=“1mes”&&
}
**我明白了！！！我找到了答案**

{optionSelected==“1mes”&&我尝试了。{optionSelected==“doce”&&}但当我选择该选项时，图形不会改变。请写下代码，而不是发布图片。当然我会考虑到这一点，我是新加入社区的，我正在学习。非常感谢！）