Не могу разобрать данные в setState реагирующих из моего API

Question

Я сделал запрос API с помощью axios, получил свои данные, а затем проанализировал их с

dp = JSON.parse(JSON.stringify(response.data.data));,

, но когда я хочу вызвать setState на этих данных и предоставитьих ко всему моему приложению, используя Context API, где мое состояние содержит следующее:

state = {
      data: [],
      isLoading: true
    };

и вызов this.setState в моем componenetDidMount(), например, так:

this.setState({data: dp});

Однако при этом выдается следующая ошибка:

Неизученное инвариантное нарушение: объекты недопустимы как дочерние элементы React (найдено: объект с ключами

PS: у меня естьглубоко вложенные объекты в моем вызове API, поэтому я не могу определить их свойства в своем состоянии.

UPDATE

 render () {
    return (
      <CoinContext.Provider 
        value={{
          data: this.state.data
        }}>
      </CoinContext.Provider>
    );
  }

значение dp: результат запроса dp в консоли

ОБНОВЛЕНИЕ 2

context.js:

import React from 'react';

export default React.createContext({
    data: []
})

app.js:

import axios from './axios-coins';
import CPContext from './context/context.js'


class App extends Component {

    state = {
      data: [],
      isLoading: true
    };

componentDidMount() {
      this.fetchData();
}

fetchData() {
  axios
    .get("")
    .then(response => {
      data1 = JSON.parse(JSON.stringify(response.data.data));
      console.log(data1);
      this.setState({data: data1});
    })
    .catch(error => this.setState({ error, isLoading: false }));
}

render () {
    return (
      <CoinContext.Provider 
        value={{
          data: this.state.data
        }}>
      </CoinContext.Provider>
    );
  }
}

export default App;