我不明白为什么会出现此错误 TypeError: 无法读取 null 的属性（读取“map”） ，这是一个非常简单的功能。我希望有人能帮助我。

这是我的代码，我无法从 API 请求映射对象。 为了保护隐私，我修改了 API 请求的密钥。

import { useEffect, useState } from "react";

export default function Featured() {

    const [featured, setFeatured] = useState(null);

    useEffect(() => {
        fetch('https://api.rawg.io/api/games?dates=2021-01-01,2021-12-31&ordering=-rating&key=1234')
        .then(response => response.json())
        .then(data => {
            console.log(data.results.slice(0, 4));
            setFeatured(data.results.slice(0, 4));
        });
    }, []);


    return (
        <div className="container mt-5">
            <div className="row">
                {featured.map((el) => {
                    return (
                        <div>{el.name}</div>
                    )
                })}
            </div>
        </div>
    );
}