Tengo un objeto json que he filtrado y mapeado. Sin embargo, necesito agregar un color de fondo a cualquier elemento que tenga "Señorita" o "Sra" o "Sra". Estoy usando tailwindcss en este momento, pero sé que puedo hacer estilos en línea.

Intenté usar la condición if else con un .match pero solo hace que la pantalla se quede en blanco, ¿hay otra forma?

Esto es lo que tengo hasta ahora

La API a la que llamo: https://randomuser.me/api/?results=20

 const [searchUser, setSearchUser] = useState("") <div className="grid grid-cols-4 gap-2 p-2 mt-20"> {data?.results.filter((val: any)=>{ if (searchUser === "") { return val } else if (val.name.first.toLowerCase().includes(searchUser.toLowerCase())) { return val } else if (val.email.toLowerCase().includes(searchUser.toLowerCase())){ return val } else if (val.location.city.toLowerCase().includes(searchUser.toLowerCase())){ return val } }).map((d: any) => ( <div className="border-4"> <img src={d.picture.medium} /> <p> {" "} {d.name.title} {d.name.first} {d.name.last} </p> <p className="font-bold text-lg font-serif">Gender: {d.gender}</p> <p className="font-bold text-lg font-serif">Contact: {d.email}</p> <p className="font-bold text-lg font-serif"> City: {d.location.city} </p> </div> ))} </div>

Déjame saber, gracias.