React - trouble rendering <div> in array.map() - reactjs

Question

I've been trying to figure this out for a couple days & haven't had any luck after reviewing similar questions.
The page loads the first menu item. But, when you click on it, only console.log(page) goes off & the following <div>{page}</div> don't appear on the page.
import React from 'react';
import { Component } from 'react';
import ReactDOM from 'react-dom/client';
import { Collapse } from 'react-bootstrap';
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
pages: ['a', 'b', 'c'],
selectedPage: 'a',
isOpen: false,
};
}
toggle() {
this.setState({isOpen: !this.state.isOpen})
}
selectPage(page) {
this.setState({ selectedPage: {page}})
}
listPages = (
() => {
let p;
p = this.state.pages.filter( page => page !== this.state.selectedPage);
/*
nesting <div> in <>{}</> didn't fix
*/
p.map((page, index) => {
console.log(page)
return (
<div
className={page + ' menu-item'}
onClick={() => {this.selectPage(page); this.toggle();}}
key={index + 1}
>
{page}
</div>
)
}
);
}
)
render() {
return(
<div className='menu'>
<div
className={ this.state.selectedPage + ' menu-item'}
onClick={() => { this.toggle()} }
key={1}
>
{this.state.selectedPage}
</div>
<Collapse in={this.state.isOpen}>
<>
{this.listPages()}
</>
</Collapse>
</div>
)
}
}

Answer 1

the function listPages is being executed but it doesn't return anything to show, what you need to do is add a return to your function for the map like this:
listPages = () => {
let p;
p = this.state.pages.filter( page => page !== this.state.selectedPage);
/*
nesting <div> in <>{}</> didn't fix
*/
return p.map((page, index) => {
console.log(page)
return (
<div
className={page + ' menu-item'}
onClick={() => {this.selectPage(page); this.toggle();}}
key={index + 1}
>
{page}
</div>
)
}
);
}