Functional Component data not re-rendering on update in Framer Preview

Question

I am making a list view which dynamically has to change every few seconds when the data source list updates.

The list from where it is getting the data is essentially

const area = [a1,a2,a3,.....,a50]

From this list, I setState([]) of another list - region which is rendered into a Frame using array.map

I tried various methods from https://www.robinwieruch.de/react-function-component

I am using useEffect()to make changes to the array regions which is supposed to be rendered

export function DynamicList() {
    const [region, setRegion] = React.useState([])
    useEffect(() => {
        setInterval(() => {
            //take a random integer between 0 and length of the main array - areas

            // if it already exists in the smaller array - regions, then delete it at that index
            if (region.indexOf(areas[randNum]) != -1) {
                // find the index to delete
                delIndex = region.indexOf(areas[randNum])
                console.log(areas[randNum] + " " + delIndex)

                //delete the item at that index
                region.splice(delIndex, 1)
            }

            // adding the random itemt o first position
            region.splice(0, 0, areas[randNum])
            region.join()

            setRegion(region)
            console.log(region)
        }, 6000)
}, [])
}

Console.log is functioning and I see the Region array being updated, but it does not render in the preview section

The part for rendering the UI is

return(
   <Stack>
   {region.map((item, index) => {
       return (
           <Frame
            background=""
            key={index}
            defaultValue={item}
            height={10}
            width={200}
            radius="4%"
            color="ffffff"
            style={{
                fontFamily: "Lato",
                fontSize: 10,
            }}
            >
                {item}
            </Frame>
        )
    })}
  </Stack>
)

I expect in the preview, cities to keep updating with every new city being added to region array showing above the already existing list.

EDIT : SOLVED. ANSWER BELOW

Answer 1

The solution entailed setting region differently.

with setRegion(region) region does not get to know that change has been made to the array. Therefore, using setRegion([...region]) copies the temp Region to Region.

Thus code becomes

useEffect(() => {
    const id = setInterval(() => {
    randNum = Math.floor(0 + Math.random() * areas.length)

    // if it already exists, then delete it
    if (region.indexOf(areas[randNum]) != -1) {
         // find the index to delete
         delIndex = region.indexOf(areas[randNum])
         console.log(areas[randNum] + " " + delIndex)
         //delete the item at that index
         region.splice(delIndex, 1)
    }

    // adding the random itemt o first position
    region.splice(0, 0, areas[randNum])

    // region.join()
    setRegion([...region])
    console.log(region)
    }, 2000)

}, [region])