tengo este problema. Estoy consultando una api en mi localhost con una aplicación en REACT.

    import React, {useEffect, useState} from "react";
import ListGroup from 'react-bootstrap/ListGroup';
import './List.scss'

const List = () => {

    const [lista, SetLista] = useState()
    
    const url = "http://127.0.0.1:8000/api/template/"
    const fetchApi = async () => {
        console.log(">>>>>>>>>>>>>>>>>>")
        const response = await fetch(url)
        console.log(">>>>>>>>>>>>>>>>>>")
        const responseJSON = await response.json()
        console.log(responseJSON[0])
        SetLista(responseJSON)
    }

    useEffect(() => {
        console.log("paso por aqui")
        fetchApi()
    }, [])

    console.log("%%%%%%%%%%")
    console.log(lista)
    console.log("%%%%%%%%%%")

    const Lista_front = () => {
        for(var x in lista){
            console.log(lista[x])
        }
    }

    return(
        <div>
            <h1>Lista de Templates</h1>
            {lista.map((li) => {
                    <div>
                        <ListGroup>
                            <ListGroup.Item action>
                                <h3>TEMPLATE: {li.tmp_name}</h3>
                            </ListGroup.Item>
                        </ListGroup>
                    </div>
                
            })}
        </div>               
    )
}

export default List;

Al momento de querer renderizar las respuestas en una lista me genera el siguiente error:

List.js:36 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at List (List.js:36:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

Es como que no hiciera el fetch a la api sino que de una vez el .map y por ende no hay nada en el array, alguien puede ayudarme?