React: data not loading after being fetched

Using MUI and I have a Select component (a dropdown menu) whose options I want to populate using data from a fetch request. I store the data in the state with an array, named ‘partners’.
Initially, partners.map() did not work because partners was empty, so I was thinking that I should wait for the fetch to finish before rendering. And so this is my code with that in mind:

  const [partners, setPartners] = useState([]);
  React.useEffect(() => {
    fetch('http://localhost:3000/partners')
      .then((resp) => resp.json())
      .then((data) => setPartners(data));
    console.log(partners);
  }, []);

  if (!partners.length) {
    return <Typography>Loading...</Typography>;
  }
  return ( 
    <FormControl>
      <>
        <Select
          onChange={handleFormChange}
        >
          {partners.map(({ name }) => (
            <MenuItem value={name}>{name}</MenuItem>
          ))}
        </Select>
      </>
    </FormControl>
  )

But now, the page is just stuck on ‘Loading…’ and doesn’t change. I’ve tried using !!!partners.length in the if statement too but it didn’t seem to make a difference. The console.log(partners) statement in the useEffect just returns an empty array. Thing is, the data being fetched is most definitely not empty/null so I’m not sure what’s going on. Is it possible that the console.log() is being run before the fetch or setPartners statements fully complete? Is partners even being changed? If so, how is it possible that the check for partners.length doesn’t return True at any point in time?