TypeError: Невозможно прочитать свойства null , не перехватывать данные - React

У меня проблема с созданием моего приложения. Это мой первый проект в React. И есть и ошибка.

Ошибка

Edit -> 
First error-> 

Uncaught TypeError: Cannot read properties of null (reading '0')
    at Search (bundle.js:511:19)
    at renderWithHooks (bundle.js:22935:22)
    at mountIndeterminateComponent (bundle.js:25697:17)
    at beginWork (bundle.js:26896:20)
    at HTMLUnknownElement.callCallback (bundle.js:11885:18)
    at Object.invokeGuardedCallbackDev (bundle.js:11934:20)
    at invokeGuardedCallback (bundle.js:11994:35)
    at beginWork$1 (bundle.js:31736:11)
    at performUnitOfWork (bundle.js:30572:16)
    at workLoopSync (bundle.js:30509:9)



// this problem I solve 
b.AssertionError
actual: null
expected: true
generatedMessage: false
message: "Invalid pattern"
name: "AssertionError"
operator: "= = "
stack: "AssertionError: Invalid pattern\n    at E (chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1409:4073)\n    at g (chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1409:4149)\n    at C (chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1409:4568)\n    at chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1416:5843\n    at Array.find (<anonymous>)\n    at chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1416:5831\n    at Generator.next (<anonymous>)\n    at ae (chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js:1416:5263)"
[[Prototype]]: Error

И приложение не ловит данные. Прежде чем это сработало. Теперь это работает, только если сначала компонент поиска комментариев, после этого приложение работает, а во-вторых, я рекомендовал компонент, и приложение работает нормально. Но когда я запустил приложение -> запуск npm, у меня возникла та же проблема.

спасибо за помощь

import './App.css';
import { React, useState, useEffect } from "react";
import axios from "axios";
import Search from './Component/Search'
function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
useEffect(() => {
    const getData = async () => {
      try {
        const response = await axios.get(
          ` https://api.hatchways.io/assessment/students`
        );
        let responseDataArray = response.data.students;
        // console.info(responseDataArray);
        setData(responseDataArray);
        setError(null);
      } catch (err) {
        setError(err.message);
        setData(null);
      } finally {
        setLoading(false);
      }
    };
    getData();
  }, []);
return (
    <div className = "main">
      {/* <h1></h1> */}
      <div className = "search">
      </div>
      {loading && <div>A moment please...</div>}
      {error && (
        <div>{`There is a problem fetching the post data - ${error}`}</div>
      )}
      <h1> hi there</h1>
      <Search details = {data} />
    </div>
  );
}

export default App;