How to call blog post categories in HTML in a React project

import { Carousel } from 'react-bootstrap';

import { useState, useEffect } from "react"

import client from "../client"

import { Link } from 'react-router-dom';

export default function Homepage() {

const [posts, setPosts] = useState([])

useEffect(() => {

client.fetch(

title,

slug,

body,

categories {

category -> {

title },

mainImage {

asset -> {

_id,

url

},

alt

}

).then((data) => setPosts(data)).catch(console.error)

}, [])

return (

<div>{post.categories.title}</div>

export default {

name: 'category',

title: 'Category',

type: 'document',

fields: [

{

name: 'title',

title: 'Title',

type: 'string',

},

{

name: 'description',

title: 'Description',

type: 'text',

},

],

}

  235 |     alt={post.title}
  236 |   />
  237 |   
> 238 |   <span className="thumb-title">{post.categories.title} </span>
      | ^
  239 | </div>
  240 | <h5 className="font-weight-bold mt-3">
  241 | {post.title}

console.log

console.log