react 초보자 질문드립니다.

오픈소스를 수정하여 react에서 파일열기 기능을 통해 파일의 경로, 이름을 얻고자 합니다.

따라서 위의 게시글을통해 file browser 기능을 추가하고 얻으려고 하는데,

게시글에 있는 아래의 코드를

const [filesContent, errors, openFileSelector, loading] = useFilePicker({
    multiple: true,
    // accept: '.ics,.pdf',
    accept: ['.json', '.pdf'],
  });

  if (errors.length > 0) return <p>Error!</p>;

  if (loading) {
    return <div>Loading...</div>;
  }
test() {
        const [filesContent, errors, openFileSelector, loading] = useFilePicker({
            multiple: true,
            // accept: '.ics,.pdf',
            accept: ['.json', '.pdf'],
        });

        if (errors.length > 0) return <p>Error!</p>;

        if (loading) {
            return <div>Loading...</div>;
        }
    }

다음과 같이 넣고 돌렸습니다.

그리고 Uncaught ReferenceError: openFileSelector is not defined 에러를 발생했는데 어떤 이유로 에러가 발생하는지 모르겠습니다.

게시글에는 function App()으로 이루어져있지만 오픈소스에는 export default class 를 통해 컴포넌트를 만들었는데 두 차이때문에 그런것인지 궁금합니다.

전체 코드를 볼 수 없어서 정확치는 않지만 openFileSelector가 test 함수 안에 있어서 그런거 같아요.
이해가 안되시면 codeSandbox 에 올려서 다시 질문 해주시거나 전체 소스 코드를 올려주세요.

다른 file browser example을 참고하여 기능은 만들었습니다.

말씀해주신 것처럼 test안에 만들어서 그런 거 같아요

답변 감사합니다.