How do I change the color of these svg icons of the selected tab?

Question

I'm wondering how I can most efficiently change the color of the icon of the selected tab.

  const [trainColor, setTrainColor] = React.useState('')
  const [busColor, setBusColor] = React.useState('')

  return (
    <StyledSectionContainer>
      <InnerContainer>
        <Tabs.Root defaultValue="tab1">
          <StyledTabsList aria-label="tabs example">
            <StyledTabsTrigger value="tab2">
              <Train
                color={trainColor}
                onClick={() => setTrainColor(theme.color.orange)}
              />
            </StyledTabsTrigger>
            <StyledTabsTrigger value="tab3">
              <Bus
                color={busColor}
                onClick={() => setBusColor(theme.color.orange)}
              />
            </StyledTabsTrigger>  
          </StyledTabsList>

Answer 1

Radix icons use currentColor so, try wrapping you icons with a div that provides the color:

<div style={{ color: trainColor}}><Train onClick={...} /></div>