fixed key error

client/app/screens/chat/ChatScreen.tsx

@@ -1,5 +1,4 @@
 import * as Crypto from "expo-crypto";
-import React, { useEffect } from "react";
 import {
   KeyboardAvoidingView,
   Platform,
@@ -17,6 +16,7 @@ import { useSettings } from "../../contexts/SettingsContext";
 import { useSocket } from "../../contexts/SocketContext";
 import { AuthStore } from "../../services/AuthStore";
 import { Message } from "../../types/Message";
+import { useState, useEffect } from "react";
 
 const ChatScreen = () => {
   const settings = useSettings();
@@ -28,8 +28,9 @@ const ChatScreen = () => {
   // Note: To prevent complexity, all user information is grabbed from different contexts and services. If we wanted most information inside of UserContext, we would have to import contexts within contexts and have state change as certain things mount, which could cause errors that are difficult to pinpoint.
 
   // Message loading and sending logic
-  const [messages, setMessages] = React.useState<Message[]>([]);
-  const [messageContent, setMessageContent] = React.useState<string>("");
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [messageContent, setMessageContent] = useState<string>("");
+
 
   useEffect(() => {
     if (socket === null) return; // This line might need to be changed

client/app/screens/settings/SettingsScreen.tsx

@@ -8,7 +8,7 @@ import { SettingsItem } from "../../components/settings/SettingsItem";
 // select type: arrow to the right to switch pages
 const Sections = [
   {
-    header: "Notications",
+    header: "Notifcations",
     items: [
       {
         id: "notifiyNewMessage",
@@ -46,13 +46,14 @@ const SettingsScreen: React.FC = () => {
           <Text style={styles.headerText}>Settings</Text>
         </View>
         {Sections.map(({ header, items }) => (
-          <View style={styles.section} key={header}>
+          <View style={styles.section}>
             <View style={styles.sectionHeader}>
               <Text style={styles.sectionHeaderText}>{header}</Text>
             </View>
             <View style={styles.sectionContent}>
               {items.map(({ id, title, type }) => (
                 <SettingsItem
+                  key={id}
                   id={id}
                   title={title}
                   type={type}