[ Foro de Javascript ]

filter de datos segun estado de poliza

Buenas tardes necesito porfavor si alguien me puede ayudar, crear una targeta en la cual lleva un mensage, color e icono segun el estado de una poliza

Cree un archivo js con titulo, descripcion, color e icono
// import WaringIcon from '../../src/assets/images/WaringIcon.svg';
import iconrequires from '../../src/assets/images/iconrequires.svg';
import Iconinspection from '../../src/assets/images/Iconinspection.svg';
import Iconrejected from '../../src/assets/images/Iconrejected.svg';

export const statusMessages = [
 {
   id: 1,
   icons: iconrequires,
   status: 'PROCESINS',
   color: '#B85D00',
   title: 'Inspeccion en proceso',
   description: 'Tu inspección está en proceso de análisis y revisión',
 },
 {
   id: 2,
   icons: Iconrejected,
   status: 'RECHAZADA',
   color: '#D32F2F',
   title: 'Inspección rechazada',
   description:
     'La inspección realizada a su vehículo no fue aprobada. Por favor contacta a tu ejecutivo',
 },
 {
   id: 3,
   icons: iconrequires,
   status: 'ENPROCESO',
   color: '#0061F5',
   title: 'Este vehículo requiere inspección',
   description: 'Solicitaremos una inspección para esta placa',
 },
 {
   id: 4,
   icons: Iconinspection,
   status: 'NOREQUERIDO',
   color: '#008040',
   title: 'Este vehículo no requiere inspección',
   description: 'Puedes continuar con el proceso de emisión',
 },
 {
   id: 5,
   icons: Iconinspection,
   status: 'APROBADA',
   color: '#008040',
   title: 'Inspección aprobada',
   description: 'La solicitud de inspección se encuentra aprobada para esta placa',
 },
];

Y lo estoy mapeando en un archivo jsx
import React from 'react';
import { statusMessages } from 'utils/statusMessages';

const messages = statusMessages;

const StatusMessageInfo = () => {
 const filteredMessages = messages.filter(
   (message) =>
     message.status === 'APROBADA' ||
     message.status === 'RECHAZADA' ||
     message.status === 'NOREQUERIDO' ||
     message.status === 'APROBADA' ||
     message.status === 'PROCESINS',
 );
 console.log(filteredMessages);

 return (
   <div>
     {filteredMessages.map((message) => (
       <div className={`bg-white w-865.99 h-60 mt-10 border-left border-l-${message.color}}`}>
         <div key={message.id}>
           <img src={message.icons} alt="" />
           <p className={`text-${message.color}`}>{message.title}</p>
           <p>{message.description}</p>
         </div>
       </div>
     ))}
   </div>
 );
};

export default StatusMessageInfo;

Pero al momento de renderizar las targetas se muestran todas y no segun el estado como deberia de ser.

SI me pueden ayudar les agradeceria