Getting this error while rendering the page

if you see the below code the witness var can be undefined if it doesn't find any account_id matching the given witnessId. In that case, the error is being thrown so do this

getWitnessName = (witnessId) => {
    if (this.props.witnesses) {
        const witness = this.props.witnesses.find(el => el.account_id === witnessId)
        return witness ? witness.account_name : `No witness for given id: ${witnessId}`;
    }
}

You can use Optional chaining

Add a nullish coalescing operator to complete the picture instead of the normal || which will not react to falsy values

return this.props.witnesses.find(el => el.account_id === witnessId)?.account_name ?? "N/A";

It will handle missing witness and missing account_name

Example

const props = {
  witnesses: [
  { account_id: 1, account_name: "Fred"}, 
  { account_id: 2, account_name: "Joe" }, 
  { account_id: 3 }]
};

const getName = witnessId => props.witnesses
   .find(el => el.account_id === witnessId)?.account_name ?? "N/A";

console.log(getName(1))
console.log(getName(2))
console.log(getName(3))
console.log(getName(4))

Try to validate first at to get the property, That's happening cause it's not finding any with that validation input. Then find returns undefined, and you can't obtain property from undefined.

For example

this.props.witnesses.find(el => el.account_id === witnessId)?.account_name ?? 'Account Not Found'; 

getWitnessName = (witnessId) => {
    if (this.props.witnesses) {
        let foundWitnesses = this.props.witnesses.find(el => el.account_id === witnessId);
        if(foundWitnesses)
             return foundWitnesses.account_name;
        else 
             return 'Not found';
    }
}