Cannot select Options from Material UI's Autocomplete Component

I cannot select the options being displayed from MUI's autocomplete component. The reason I think is that I am using renderOption. I want to display the image along the title in the options of my component and without using renderOption, I have not been able to do that. But, doing so (using renderOption), I cannot select any option.

import React, { useState } from 'react';
import { fetchSearchAnimeEndpoint } from '../../redux';
import { connect } from 'react-redux';
import { debounce } from 'lodash';

import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';

import './searchbar.css';

const SearchBar = (props: any) => {
  const [openPopper, setOpenPopper] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const { anime } = props;

  const handleKeyPress = debounce(
    (event: React.FormEvent<HTMLInputElement>) => {
      const value = (event.target as HTMLInputElement).value;

      props.fetchSearchAnime(value);
    },
    700
  );

  return (
    <div>
      
     

  {/* 
Cannot select the options being displayed either by clicking or using keyboard
  Want to display the title on the textfield by selecting desired option */}


      <Autocomplete
        id="combo-box-demo"
        options={anime.results.data ? anime.results.data : []}
        style={{ width: 300, marginTop: '2rem' }}
        isOptionEqualToValue={(option, value) => option.title === value.title}
        getOptionLabel={(option: any) => option.title}
        renderOption={(option: any, optionAnime) => {
          return (
            <h4 key={optionAnime.mal_id} className="search-container">
              <img
                className="search-image"
                alt="anime"
                src={optionAnime.image_url}
              />
              {optionAnime.title}
            </h4>
          );
        }}
        renderInput={(params) => (
          <TextField
            onInput={(e) => {
              if ((e.target as HTMLInputElement).value.length >= 3) {
                setOpenPopper(true);
              } else {
                setOpenPopper(false);
              }
              return handleKeyPress(e);
            }}
            {...params}
            label="Anime"
          />
        )}
        open={openPopper}
        onClose={() => {
          setOpenPopper(false);
        }}
      />
    </div>
  );
};

const mapStateToProps = (state: any) => {
  return {
    anime: state,
  };
};

const mapDispatchToProps = (dispatch: any) => {
  return {
    fetchSearchAnime: (name: string) =>
      dispatch(fetchSearchAnimeEndpoint(name)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

I am getting the options and just cannot select them. What I want is to select them by clicking on them or using the keyboard and get the title value on the textfield