My component is never read, in my React code - reactjs

Question

Component, myImage is never read.
import React from 'react';
import { Box } from "#mui/material";
import { Link } from 'react-router-dom';
import myImage from './Profile/Profile.myImage';
const HomeProfile = () => {
return (
<Box sx={{ border: '1px dashed grey' }}>
<myImage />
<Link to="/app/profile" className="red btn-flat white-text">
Change Profile
</Link>
</Box>
)
}
export default HomeProfile;
This is the file './Profile/Profile.myImage':
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchProfile } from '../../../actions';
import { Image } from 'react-bootstrap';
import axios from 'axios';
class myImage extends Component {
componentDidMount() {
this.props.fetchProfile();
}
async renderMyImage() {
const imageDir = await axios.get('/api/profile');
return (
<div>
<h1>hello</h1>
<Image src={imageDir.profileImg.type} />
</div>
);
}
render() {
return (
<div>
<div>{this.renderMyImage()}</div>
<h1>bye</h1>
</div>
);
}
}
function mapStateToProps({ user }) {
return { user };
}
export default connect(mapStateToProps, {fetchProfile})(myImage);
In the route.js, app.get('/api/profile') is defined like this.
however, nothing appears in the console.
app.get('/api/profile', requireLogin, async(req, res) => {
console.log('test: api/profile');
const profile = await User.find({ _user: req.user.id });
res.send(profile);
})
I thought, something was wrong in the function 'renderMyImage()', so I added "hello" and "bye", but still, nothing is on the view, while other components can be seen on the screen.

Answer 1

axios is async so renderMyImage should be an async function.
Have you tried
async renderMyImage() {
const imageDir = await axios.get('/api/profile');
return (
<div>
<h1>hello</h1>
<Image src={imageDir.profileImg.type} />
</div>
);
}