[Gatsby + Contentful]リッチコンテンツ中の画像が表示できない

現在「Webサイト高速化のための静的ジェネレーター活用入門」と本でGatsbyとContentfulを利用してブログを作っているのですが、リッチコンテンツの中にある画像が表示されません（エラーになります）

P.218~P.221 7-8 リッチテキスト内の画像を表示する

エラー文

console
1×
2TypeError: Cannot read property 'file' of undefined
3embedded-asset-block
4src/pages/blog.js:24
5  21 | ),
6  22 | [BLOCKS.EMBEDDED_ASSET]: node => (
7  23 |   <Image
8> 24 |     fluid={useContentfulImage(node.data.target.fields.file["ja-JP"].url)}
9  25 |     alt=""
10  26 |   />
11  27 | ),
12View compiled

js
1// src/utils/useContentfulImage.js
2import { useStaticQuery, graphql } from 'gatsby';
3
4export default assetUrl => {
5    const { allContentfulAsset } = useStaticQuery(graphql`
6        query {
7            allContentfulAsset {
8                nodes {
9                    file {
10                        url
11                    }
12                    fluid(maxWidth: 785) {
13                        ...GatsbyContentfulFluid_withWebp
14                    }
15                }
16            }
17        }
18    `);
19
20    return allContentfulAsset.nodes.find(n => n.file.url === assetUrl).fruid;
21}

js
1// src/pages/blog.js
2import React from 'react';
3import { graphql } from 'gatsby';
4import Image from 'gatsby-image';
5
6import Layout from '../components/layout';
7import SEO from '../components/seo';
8import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
9import { faClock, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
10import { faCheckSquare } from '@fortawesome/free-regular-svg-icons';
11import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
12import { BLOCKS } from '@contentful/rich-text-types';
13
14// こっちはインポートしてもエラーになりません
15import useContentfulImage from '../utils/useContentfulImage';
16
17const options = {
18  renderNode: {
19    [BLOCKS.HEADING_3]: (node, children) => (
20      <h3>
21        <FontAwesomeIcon icon={faCheckSquare} className="check" />
22        {children}
23      </h3>
24    ),
25    // 問題の箇所（これを書くと上記エラーになります）
26    [BLOCKS.EMBEDDED_ASSET]: node => (
27      <Image
28        fluid={useContentfulImage(node.data.target.fields.file["ja-JP"].url)}
29        alt=""
30      />
31    ),
32  },
33  renderText: text => {
34    return text.split('\n').reduce((children, textSegment, index) => {
35      return [...children, index > 0 && <br key={index} />, textSegment];
36    }, []);
37  }
38}
39
40export const query = graphql `
41  query {
42    contentfulBlogPost {
43      title
44      publishDateJP:publishDate(formatString: "YYYY年MM月DD日")
45      publishDate
46      category {
47        category
48        categorySlug
49        id
50      }
51      eyecatch {
52        fluid(maxWidth: 1600) {
53          ...GatsbyContentfulFluid_withWebp
54        }
55        description
56      }
57      content {
58        json
59      }
60    }
61  }
62`;
63
64const Blog = ({ data }) => {
65  return (
66    <>
67      <Layout>
68          <SEO title="Blog" />
69
70          <figure>
71            <Image
72              fluid={data.contentfulBlogPost.eyecatch.fluid}
73              alt={data.contentfulBlogPost.eyecatch.description}
74              className="eycach-image"
75            />
76          </figure>
77
78          <div className="inner-main">
79            <article className="article">
80              <h2 className="title">{ data.contentfulBlogPost.title }</h2>
81
82              <aside className="info">
83                <time dateTime={ data.contentfulBlogPost.publishDate }>
84                  <FontAwesomeIcon icon={faClock} /> { data.contentfulBlogPost.publishDateJP }
85                </time>
86                <div className="category">
87                  <FontAwesomeIcon icon={faFolderOpen} />
88                  <ul>
89                    {data.contentfulBlogPost.category.map(cat => (
90                      <li className={cat.categorySlug} key={cat.id}>
91                        {cat.category}
92                      </li>
93                    ))}
94                  </ul>
95                </div>
96              </aside>
97
98              <div className="post-body">
99                {documentToReactComponents(
100                  data.contentfulBlogPost.content.json,
101                  options
102                )}
103              </div>
104            </article>
105        </div> 
106      </Layout>
107    </>
108  );
109}
110
111export default Blog;

こちらのクエリで画像は出てます

graphQL
1query {
2  allContentfulAsset {
3    nodes {
4      file {
5        url
6      }
7      fluid {
8        base64
9        aspectRatio
10        src
11        srcSet
12        srcWebp
13        srcSetWebp
14        sizes
15      }
16    }
17  }
18}