Передача пропсов в динамический компонент react
У меня есть объект, содержащий еще объекты, вот структура:
export const dataElements={
[NameLines.segment]:{
nameInMenu:'Линия тренда',
toolsOption:['Стиль','Текст','Координаты'],
toolsComponents:{
'Стиль':MainOutletSettingsLine,
'Текст':TextDrawingElement,
'Кординаты':CoordsPopUp,
},
isIndicator:false,
presetsAvailable:true
},marketstructure:{
nameInMenu:'Зиг Заг',
toolsOption:['Стиль'],
toolsComponents:{
'Стиль':MainOutletZigZagSettings,
},
isIndicator:true,
presetsAvailable:false
}
этот объект я использую в компоненте:
const choosedElement=dataElements[('name' in element ? element.name : uuidElement ) as keyof typeof dataElements]
const [choosedTools, setChoosedTools]=useState<string>(choosedElement.toolsOption[0])
const ChosedComponent = choosedElement.toolsComponents[choosedTools as keyof typeof choosedElement.toolsComponents]
return (
<>
<ToolsDrawingElement data={choosedElement.toolsOption} choosedTools={choosedTools} setChoosedTools={setChoosedTools}/>
<ChosedComponent uuidElement={uuidElement} setCopyPrice1={setCopyPrice1} setCopyPrice2={setCopyPrice2} price1={price1} price2={price2} setPrice1={setPrice1} setPrice2={setPrice2}/>
</>)
Из-за чего у меня возникает ошибка
Это происходит из-за того что chosedComponent может принимать разные пропсы, в итоге как правильно подойти к такому подходу, чтобы передавались нужные пропсы и чтобы не прописывать проверки руками?