Trying to get the SearchBar to get data from the API

Forgive me if the formatting didnt work. I am trying to use the SearchBar to get the data from the API. (left the AAPL symbol as an example) I would like I am missing something and cant quite figure it out. How can I get this to work? Any assistance to my first post is greatly appreciated.

import axios from "axios";

function SearchBar() {
  const [value, setValue] = useState("");
  // const [data, setData] = useState([]);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("form submitted", value);
  };
useEffect(() => {
   
      .get(`https://api.twelvedata.com/symbol_search?symbol=AAPL`)
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);


  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>Search:</label>
        <input type="text" value={value} onChange={handleChange}></input>
        <button type="submit" value={handleSubmit}>
          Submit
        </button>
      </form>
      {/*value from form so that works from display*/}
      <div>{value}</div>
    </div>
  );
}

export default SearchBar;```