I was making api project but I am getting type error : undefined cannot read properties .. (reading 'map') in react js

Question

I was making google clone website with rapid api but I end with getting this error. I have two files. Under this having my .map function and I am accessing my state with prop and named it farma

react_devtools_backend.js:3973 
        
       TypeError: Cannot read properties of undefined (reading 'map')
    at Beta (Beta.js:11:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateFunctionComponent (react-dom.development.js:17356:1)
    at beginWork (react-dom.development.js:19063:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

beta.js file

export default function Beta({ farma,response,search }) {
    return (
      <>
      <header className='beta'>
        <div className="beta-nav" >
            <div className="logo-beta">
      <img alt="Google" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
    </div>
    
    <div className="bar">
      <form action="" onSubmit={response}>
      <input className="searchbar" type="search" title="Search" onChange={search}/>
  <button type="submit">Search</button>
      </form>
    </div>   

    {farma.map((item) =>{
      return(
        <div className="items" key={item.link}>
          <p>{item.title}</p>
        </div>
      )
    })} 
        </div>
        </header>
        
        </>
    )
}

another one is my app.js file

import { useEffect } from 'react';
import './index.css'
import Beta from './Main/Beta'
export default function App() {

  const [keyword, setkeyword] = useState('');
  const [endpoint, setendpoint] = useState('');
  const [answer, setanswer] = useState([]);
  
  useEffect(() => {
  const options = {
    method: 'GET',
    headers: {
      'X-RapidAPI-Host': 'google-web-search.p.rapidapi.com',
      'X-RapidAPI-Key': 'f0892566b9mshc3d8dec8b959f05p1e24b6jsn38bfa46eacef'
    }
  };
  
  fetch(`https://google-web-search.p.rapidapi.com/?query=+${endpoint}&gl=US&max=10`, options)
    .then(response => response.json())
    .then(data => setanswer(data.results))
    .catch(err => console.error(err));
  }, [endpoint])

const search =(e)=>{

setkeyword(e.target.value);
console.log(keyword);

}

const submitHandle = (e)=>{
e.preventDefault();
setendpoint(keyword);
}

  return (
    <>
    <div>
   <Beta search={search} farma={answer} response={submitHandle}/>
    </div>
    </>
  )
}

I am new to programming please help me. I have searched this answer but I didn't find any solution thats why I am writing this question.