I am using a REST API to pull data to be used in Nivo Line Charts. Nivo LIne Charts requires the data to be formatted as such:

Chart data, which must conform to this structure:

Array<{
    id:   string | number
    data: Array<{
        x: number | string | Date
        y: number | string | Date
    }>
}>

The data from my REST API is formatted as such:

{
    "id": 286,
    "data": [
        {
            "x": "2024-08-13",
            "y": 5828
        },
        {
            "x": "2024-08-14",
            "y": 5829
        }
    ]
}

I then fetch the data to be used in the chart and attempt to display it.

const [chart, setChart] = useState([]);

    let {id} = useParams();

    let config = {
        headers: {
            'Content-Type': 'application/json',
        }
    }

    useEffect(() => {
        axios.get(`http://localhost:8000/api/stock/chart/${id}`, config)
            .then(response => {
                setChart(response.data);
            }).catch(error => {
                console.log(error);
        })
    }, [])

However I get the following error;

TypeError: n7.filter is not a function

I believe it has something to do with the formatting of the data coming from the API.