Performing a Search is breaking layout

Question

When using the search bar to search profiles by first or last name the layout breaks. What I mean by the "layout breaks" is when performing a search if I delete characters from the input field the layout does not return to its original state, but rather it does not display profile images (please view the attachments). If I delete all the characters in the search input field and I hit the enter key the layout returns to its original state. What I would like to happen is if I delete all the characters in the search input field or hit enter the layout returns to its original state.

Search.js

import {useContext} from 'react'
import {ThemeContext} from './themeContext'

const Search = () => {
const {search, setSearch } = useContext(ThemeContext)

  const handleChange = event => {   
    if (event.keyCode !== 44) {
      setSearch(event.target.value)
    } else {
      event.preventDefault()
      setSearch("")
    }
  }
    return (
          <>
              <form className="student-search-form">
                  <input type="text" className="student-search-input" value={search} onChange={handleChange} placeholder="Search by name"/>
              </form>
          </>
          
    )
}

export default Search

themeContext.js

import {useState, useEffect, createContext} from 'react'
import axios from 'axios'
const ThemeContext = createContext()

const ThemeContextProvider = props => {

  const [students, setStudents] = useState([])
  const [loading, setLoading] = useState(false)

  const [filter, setFilter] = useState([])
  const [search, setSearch] = useState('')


  useEffect(() => {
    const studentFil = students.filter(student =>
      student.firstName.includes(search) ||
      student.lastName.includes(search))
    
      setFilter(studentFil)  
  },[students, search])


  useEffect(()=>{
    getStudents()
  },[])

  const getStudents = async () => {
    try {
          const res = await axios.get('https://api.hatchways.io/assessment/students')
          setStudents(res.data.students)
          setLoading(true)
    }
    catch (err) {
      console.log(err.message)
    }
  }

  return (
      <ThemeContext.Provider value={{students, loading, filter, search, setSearch}}>
          {props.children}
      </ThemeContext.Provider>
  )

}

Students.js

import { useState, useContext} from 'react'
import {ThemeContext} from './themeContext'
import Search from './Search'


const Students = () => {

  const {loading, filter} = useContext(ThemeContext)  

 
  return (
    <>
    <div className="student-profile-container">
        {loading &&
                <div>
                   <Search /> 
                     {filter.map(student => { 
                      return (
                     <>
                    <div className="flex-container">
                      <div className="student-profile-image">
                        <img key={student.id} src={student.pic} alt="student profile avatar"/>
                      </div>
                      <div className="student-profile-info">
                          <h1 key={student.id} className="student student-name">{student.firstName} {student.lastName}</h1> 
                          <p key={student.id} className="student student-info">Email: {student.email}</p>
                          <p key={student.id} className="student student-info">Company: {student.company}</p>
                          <p key={student.id}className="student student-info">Skill: {student.skill}</p>
                          <p key={student.id} className="student student-info">Average: {student.average}%</p>
                      
                        </div>
                    </>
                     )
                  })}  
                </div>
              }
        </div>
      </>
    );
  }

export default Students;

Styles.css:

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap');

body {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: lightgray;

}

ul {
    padding: 0;
    list-style: none;
}

li {
  line-height: 1.5; 
}

p {
  line-height: .8;
}

img {
  border: 1px solid #a9a9a9;
  border-radius: 50%;
   max-width: 100%;
   width: 7rem;
   margin-top: 4em;
}

button {
  cursor: pointer;
  background-color: transparent;
  border: none;
  font-size: 3rem;
  color: gray;
}


.student-profile-container {
  display: flex;
  justify-content: center;
  width: 800px;
  margin: 0 auto;
  margin-top: 2em;
  border: 2px #a9a9a9 solid;
  border-radius: 9px;
  background-color: #fff;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-top: 1px solid #a9a9a9;
  margin: 0;
  padding: 0 2rem;
  width: 700px;
}

.student-search-input {
  width: 100%;
  margin: 0 auto;
  padding: .7em 0;
  outline: none;
  border: none;
  text-align: left;
  font-size: 1.5rem;
}

.student-profile-image {
  width: 20%;
}

.student-profile-info {
  width: 70%;
}

.student-grades-expander {
margin-top: 2em;
padding-left: 3em;
margin-right:auto;
}