question

I have a custom list named CompanyNews which contain these fields:-

1) Title -->Free Text

2) Topic ---> choice which allow multiple selections

Where inside the custom list, we will be adding the pages titles such as "Home","CEO Message", etc.. and the related Topics. Then we will add the web part to a page >> so the web part should get the current page title >> then query the custom list by matching the Pagetitle with the list's Title field and get the Topics, then show the Topics inside the web part. if nothing matches to show nothing inside the web part.

here is my code:-

 import * as React from 'react';
 import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
    
 import styles from './RelatedTopics.module.scss';
 import { IRelatedTopicsProps } from './IRelatedTopicsProps';
 import Title from "../../../shared/components/Title/Title";
    
 export interface IRelatedTopicsState {
   labels: string[];
 }
    
 export default class RelatedTopics extends React.Component<IRelatedTopicsProps, IRelatedTopicsState> {
   private newLabelsArray = [];
   private client: SPHttpClient = this.props.context.spHttpClient;
    
   constructor(props: IRelatedTopicsProps) {
     super(props);
     this.state = {
       labels: []
     };
   }
    
   public componentDidMount() {
     this.getListItems();
   }
    
   private getListItems() {
     let url = `${this.props.context.pageContext.web.absoluteUrl}/_api/lists/getbytitle('CompanyNews')/items`;
    
     RelatedTopics.getSPData(this.client, url).then(data => {
       const labels = data.value.map(label => label.label).toString().split(',');
    
       this.setState({
         labels: labels
       });
     });
   }
    
   private static async getSPData(client: SPHttpClient, url: string): Promise<any> {
     let resp: SPHttpClientResponse = await client.get(url, SPHttpClient.configurations.v1);
     return resp.json();
   }
    
   private removeRepeatedEntryElementsArray() {
     this.state.labels.map((label, i) => {
       if(!this.newLabelsArray.includes(label)){
         this.newLabelsArray.push(label);
       }
     });
   }
    
   public render(): React.ReactElement<IRelatedTopicsProps> {
     this.removeRepeatedEntryElementsArray();
    
     return (
         <>
           <Title title={'Related Topics'} />
           <div className={styles.relatedTopics}>
             {this.newLabelsArray.map(label =>
                   <a href={****} className={styles.relatedTopics__label}>{label}</a>
             )}
           </div>
         </>
     );
   }
 }

but currently when i add the web part to any page it will show all the topics regardless of the page title. any advice?