React dynamic Icon usage

Question

I have a list of objects, for them i have imported react icons as alias of list names separately, but when providing as list name in icon place, icon is not rendering

For Example: import { BiSearchAlt2,BiCurrentLocation,BiBlanket as Blanket, BiCctv as Cctv,} from "react-icons/bi";

const defaultExtras = [Cctv, BiCctv ]

{defaultExtras.map((Eachextra) => (
        <div key={Eachextra} className="createBusBodyEachStopContainer">
          <Chip
            color="info"
            onDelete={() => handleRemoveExtras(Eachextra)}
            label={Eachextra}
            deleteIcon={<IoClose />}
            icon={Eachextra}
          />
        </div>
      ))}

so in the icon prop "Eachextra" is icon alias name as imported, but when i am providing Cctv or BiCctv icon is rendering

Answer 1

First is defaultExtras array of strings like const defaultExtras = ["Cctv", "BiCctv"];

Second what is Chip component expecting for the icon property, string or React element?

Consider using typescript it will help a lot with such issues of different expected types.