React-typescript and rendering array of components

Question

Hello how can I solve this problem? I have an array of components but I can not use "any" type. So what type component has and how can I overcome this error?

Variable 'stars' implicitly has type 'any[]' in some locations where its type cannot be determined.
Variable 'stars' implicitly has an 'any[]' type.

import { StarIcon } from "@chakra-ui/icons";

interface recipeDesc {
  recipe: Recipe;
}

const stars = [];
const NUMBER_OF_STARS = 5;
let starLimit = 0;

while (starLimit > NUMBER_OF_STARS) {
  starLimit++;
  stars.push(<StarIcon />);
}

const RecipeDescription: React.FC<recipeDesc> = (props) => {
  return (
    <Box marginLeft="2rem">
      <Text fontSize="4rem" fontWeight="700">
        {props.recipe.title}
      </Text>
      {stars}
    </Box>
  );
};

export default RecipeDescription;

Answer 1

const stars: React.ReactElement[] = [];