css: diseñar el último hijo de una lista de React

Estoy intentando diseñar una lista de elementos en React, con un estilo específico para el último elemento de esta lista.

Esto es lo que tengo por el momento

const SuggestionStyles: CSSProperties = {
  borderBottom: '1px solid #ccc',
};
// ...
{suggestions.map((suggestion: GeocodingSuggestion) => {
  return(
    <p style={SuggestionStyles} key={suggestion.name}>{suggestion.name}</p>
  );
})}

Así que no estoy usando ninguna biblioteca en particular para manejar el estilo en este momento. Y no logro encontrar cómo apuntar al último niño dentro de SuggestionStyles

------------------------------------

Cambiar estilo={SuggestionStyles} a:

estilo={sugerencias.indexOf(sugerencia) === sugerencias.longitud - 1? Estilos de sugerencia: null}

------------------------------------

Hay 2 opciones:

Utilice el selector CSS :last-child, algo como:

.container > p:last-child {
  color: red;
}

<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

Podemos usar el índice actual de map() para verificar si estamos en el último elemento y aplicar cualquier CSS en consecuencia:

{suggestions.map((suggestion, index) => {
  const style = (index === suggestions.length - 1) ? { borderBottom: '1px solid #ccc' } : '';
  return(
    <p style={style} className={className} key={suggestion.name}>{suggestion.name}</p>
  );
})}

Si ya tienes un objeto de estilo, podemos fusionarlo con el nuevo:

const style = (index === suggestions.length - 1) ? {...defaultStyling, ...{ borderBottom: '1px solid #ccc' } } : defaultStyling;