How do I use the number from my database to display that number of images from an array

I cant figure out how to take the database data, a single number between 1-5, to be displayed as an image that many times.
For example,

1  is [star]  
2 is [star][star]  
3 is [star][star][star]

 etc.

I am using MERN and everything is connected and communicating properly. I just don’t know how to call the data from my database and then convert that number into that number of images.

Here is my schema for the database. Im just trying to convert stars number into star images.

    const mongoose = require('mongoose');
    require('mongoose-type-url');
    const Schema  = mongoose.Schema;
    
    const QuestsSchema = new Schema ({
        description:{
            type: String,
            required: true,
        },
        stars:{
            type: Number,
            required: true,
        },
        timeframe:{
            type: String,
            required: true,
        }
    
    })
    
    const Quests = mongoose.model('Quest', QuestsSchema )
    
    module.exports = Quests

---

Here is my code for my homepage.js file

import React from 'react';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import myImage from '../images/star-gif.gif'

function Homepage() {

    const navigate = useNavigate();

    const [quests, setQuests] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('http://localhost:3001/quests')
            const resData = await response.json()
            setQuests(resData)
        }
        fetchData()
    }, []);


    // Array of images - works

    const stars = [
        <img id='str' src={myImage} height={80} width={80} alt=''/>, 
        <img id='str' src={myImage} height={80} width={80} alt=''/>,
        <img id='str' src={myImage} height={80} width={80} alt=''/>, 
        <img id='str' src={myImage} height={80} width={80} alt=''/>,
        <img id='str' src={myImage} height={80} width={80} alt=''/>
    ]

    // I want the number from the database to display that number of images in array
    //      ie. 2 = [star][star], 3 = [star][star][star]
    

   
    // this takes the data from the database and display it as:
    //     test
    //     2
    //     Daily

    // I want the 2 to be displayed at [image][image], not 2

    let questsFormatted = quests.map((quest, i) => {
    return (
        <div key={i}>
                <p>
                    {quest.description}
                </p>

            <div>
                    {quest.stars}
                </div>
                   
        <p >
            {quest.timeframe}
            </p>
        </div>
    )
    })
    

   // {stars} is just to see if the array, stars, works, and it does
    return (
        <div>
            <div className='header'>
                iRL
            </div>

            <div>
                <div >
                    <button className='sub-header-button' 
                     onClick={()=>{navigate('/quests')}}>
                         Quests
                    </button>
                </div>
            </div>
            <div>
                {questsFormatted}
            </div>
            <div>
                {stars}
            </div>
        </div> 

    )
   
}


export default Homepage