How do I perform a filter function on data from an Axios API call in React?

You're not showing how you're retrieving your yogas data from axios or any way to debug your current issue, but I'd recommend passing your data retrieved from axios to a child component that contains all those div boxes and formatting, etc.

function MainPage() {
    const [yogas, setYogas] = React.useState([]);
useEffect(() => {
        // axios call to populate data
        requestYogaInfo().then((resp) => {
            setYogas(resp.data); // this depends on the shape of your webservice response
        });
    }, []);


return (
        <>           
        <div className="yoga"> 
             <div className='yogasearch'>
               <h1>Yoga Poses</h1> 
               <input type="text" class="input" placeholder="Search by pose" onChange={event => {setSearchPose(event.target.value)}}/>
             </div>
             <div className="row">
                 {yogas && yogas.length > 0
                     ? (
                     yogas.filter((yoga) => {
                        if (searchPose === "") {
                            return yoga
                        }
                        else if (
                     yoga.english_name.toLowerCase().includes(searchPose.toLocaleLowerCase())) {
                                return yoga
                            }
                    }).map((yoga) => (
                   <div key={yoga.id} style={{width: '20%' }} className="card"  
                    >
                    <img className='yogaphoto' src={yoga.img_url}/>
                    <div className="card-body">
                      <h2>{yoga.english_name}</h2>

                    </div>
                  </div>
                    ))
                     )
                     : null
                 }
             </div>
        </div>
        </>
        )  
}