外部APIから所得してきた情報をmapメソッドで展開したい。

前提・実現したいこと

フロントをreact、サーバーをrailsで開発を行っています。
その際axiosを使ってrailsから所得した情報をmapで展開したいのですがうまくいきません。

前提条件　外部APIとしてはNews API(https://newsapi.org/)とrails apiモードの二箇所から情報を所得しています。問題になっているのはrailsからの情報所得の方でうまく行っていません。（memosの方です）。

発生している問題・エラーメッセージ

Main.js

import React, { useContext } from "react";
import Kizi from "./Kizi";
import AppContext from "../../context/AppContext";
import Side from './Side.js'


const Main = () => {
  const { article,memos } = useContext(AppContext);

  const item = article.map((art, index) => {
    
    return (
      <Kizi
        
        title={art.title}
        image={art.urlToImage}
        body={art.description}
        key={index}
        
      />
    );
  });





  
  const rail = memos.data.map((memo,index) =>{
    return (
      <Side 
      title={memo.title}
      image={memo.image}
      body={memo.body}
      memo={memo.memo}
      key={index}
      />
    )
  })

  return (
    <div className="main">
      {/* サイドーーーー   railsからお気に入り記事データの所得をする*/}
      <div className="said">
        {rail}
        
      </div>
      {/* ------------メインコンテンツーーーー */}
      <div className="content">{item}</div>
{/* ================右の箱＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */}
      <div className="right">
        <div className="right__box">
          <img
            className="right-image"
            src="https://picsum.photos/id/237/200/300"
          ></img>
          <div className="right-content">
            自分も含め多数の人がメモしたランキングが流れる
          </div>
        </div>
      </div>
    </div>
  );
};

export default Main;

コード

APP.js

import React ,{useState,useEffect}from 'react';
import AppContext from '../context/AppContext'
import '../scss/App.scss';
import Head from './top/Header'
import Main from './top/Main'
import axios from 'axios'

function App() {

  const [article, setArticle] = useState([]);
  const [memos, setMemos] = useState([]);
 
  useEffect(()=>{
    news();
    rails();
    
  },[])


  const news = async() =>{
    const url = 'http://newsapi.org/v2/top-headlines?country=jp&category=business&apiKey=e50c1e192d364a2a8f35150d178f8df8'
    try {
      const response = await axios.get(url);
      setArticle(response.data.articles)
    } catch (error) {
      console.error(error);
    }
  }
  console.log(memos[0]);

  const rails = async()=>{
    const memourl = 'http://localhost:3001/memos'
    try {
      const respons = await axios.get(memourl);
      setMemos(respons.data.data);
      
    } catch (error) {
      console.error(error);
    }

    }

```ここに言語を入力
コ-ド
```　　
config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'   #特定のオリジンからのリクエストを許可する

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

###エラーメッセージ
TypeError: Cannot read property 'map' of undefined

###試したこと

var toString = Object.prototype.toString　を使って型を調べましたがうまく行っているarticleも失敗しているmemosの方もどちらの object arrayでした。


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
rails 5.2.4.2 apiモード

react 
 "version": "0.1.0",
"dependencies": {
    "axios": "^0.19.2",
    "cra-template": "1.0.3",
    "node-sass": "^4.13.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"