Vue: <transition-group> children must be keyed <div>

So I'm making a custom vue info slider and I'm getting the following error in the console:

[Vue warn]: <transition-group> children must be keyed: <div>

This is my component:

<template>
<section class="slider_maincontainer">
    <transition-group name="slider-fade">
        <div class="slider_item" v-show="activeSlider===1" style="background-color:red;">
            <!--slider content-->
        </div>
        <div class="slider_item" v-show="activeSlider===2" style="background-color:blue;">
            <!--slider varied content-->
        </div>
        <div class="slider_item" v-show="activeSlider===3" style="background-color:green;">
            <!--another slider-->
        </div>
    </transition-group>
    <button class="slider_buttom_prev" @click="prevSlider()">
        <i class="slider_buttom_icon fas fa-angle-left"></i>
    </button>
    <button class="slider_buttom_next" @click="nextSlider()">
        <i class="slider_buttom_icon fas fa-angle-right"></i>
    </button>
    <div class="slider_dots_container">
        <span class="slider_dots_dot" :class="{'activeDotClass':index === activeSlider-1}" v-for="(slider, index) in slidersCount" :key="index" @click="goToSlider(index+1)"></span>
    </div>
</section>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'MainSlider',

computed:{
    ...mapState('Slider', ['activeSlider', 'slidersCount']),
},

mounted() {
    console.log(this.$options.name+' component successfully mounted');
    this.startSlider();
    console.log('slider_started');
},

methods:{
    ...mapActions('Slider', ['nextSlider', 'prevSlider', 'startSlider', 'goToSlider']),
}
};
</script>
<!--STYLES-->
<style scoped>

</style>

Why am I getting this error? the children inside my transition group are not from a v-for list.