Alguem me ajuda a concertar esses erros. pfvr React

export default function HabitsList({ date }: HabitsListProps) {

const [habitsInfo, setHabitsInfo] = useState<HabitsInfo>()

useEffect(() => {
    api.get('day', {
        params: {
            date: date.toISOString()
        }
    }).then(response => {
        console.log(response.data)
        setHabitsInfo(response.data)
    })
}, [])

return (
    <div className='mt-6 flex flex-col gap-3'>
        {habitsInfo?.possibleHabits.map((habit) => { **//Cannot Read Properties of undefined(reading 'includes')**
            return (
                <Checkbox.Root
                    key={habit.id}
                    checked={habitsInfo.completedHabits.includes(habit.id)} **// Cannot Read Properties of undefined(reading 'includes')**
                    className='flex items-center gap-3 group'>
                    <div className='h-8 w-8 rounded-lg flex items-center justify-center bg-zinc-900 border-2 border-zinc-800
                                 group-data-[state=checked]:border-green-500 group-data-[state=checked]:bg-green-500 '>
                        <Checkbox.Indicator>
                            <Check size={20} className="text-white" />
                        </Checkbox.Indicator>
                    </div>
                    <span
                        className='font-semibold text-xl text-white leading-tight 
                            group-data-[state=checked]:line-through marker:group-data-[state=checked]:text-zinc-400'>
                        {habit.title}
                    </span>
                </Checkbox.Root>
            )
        })}
    </div>
)

}

export function HabitDay({ defaultCompleted = 0, amount = 0, date }: HabitDayProps) {

const completedPercentage = amount > 0 ? Math.round((defaultCompleted / amount) * 100) : 0

const dayInMonth = dayjs(date).format('DD/MM')
const dayOfWeek = dayjs(date).format('dddd')

return (
    <Popover.Root>
        <Popover.Trigger className={clsx('w-10 h-10 border-2 rounded-lg', {
            'bg-zinc-900  border-zinc-800': completedPercentage === 0,
            'bg-violet-900 border-violet-800': completedPercentage > 0 && completedPercentage < 20,
            'bg-violet-800 border-violet-700': completedPercentage >= 20 && completedPercentage < 40,
            'bg-violet-700 border-violet-600': completedPercentage >= 40 && completedPercentage < 60,
            'bg-violet-600 border-violet-500': completedPercentage >= 60 && completedPercentage < 80,
            'bg-violet-500 border-violet-400': completedPercentage >= 80,
        })} />
        <Popover.Portal>
            <Popover.Content className='min-w-[320px] p-6 rounded-2xl bg-zinc-900 flex flex-col'>
                <span className='font-semibold text-zinc-400'>{dayOfWeek}</span>
                <span className='mt-2 font-extrabold leading-tight text-3xl'>{dayInMonth}</span>

                <ProgressBar progress={completedPercentage} /> **// ReactJSX: type is invalid**

                <HabitDayPopover date={date} />  **// ReactJSX: type is invalid**

                <Popover.Arrow height={8} width={16} className='fill-zinc-900' />
            </Popover.Content>
        </Popover.Portal>
    </Popover.Root>
)

}

To recebendo algumas informações do backend, e elas estão chegando no front, mas na hora de renderizar na tela, simplesmente, não renderiza