Material UI - Autocomplete default margin?

I'm new to Material UI and can't see to get my head straight regarding the margins of the Autocomplete. I have a form combined with Autocomplete and TextInput. But the placement of Autocomplete vs TextInput is acting weird (to me). Does autocomplete render some sort of "box" with a set of margins that TextInput doesn't? Here I had to add margin on the TextInput to make them aligned, but i'm still left with marginLeft on the Autocomplete that I want. Obviously I could add styling for it but that causes the {xs} size to break when zooming.

As you can see in the pic the margin on Autocomplete is way off the TextInput:

Anything to put me in the right direction is much appreciated.

Code as follows:

import React, { useState, useEffect } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';


export default function AddPurchase() {

    const [coinList, setCoinList] = useState([]);
    const [name, setName] = useState('');
    const [symbol, setSymbol] = useState('');
    const [date, setDate] = useState('');
    const [price, setPrice] = useState('');
    const [amount, setAmount] = useState('');


    const data = {
        name: name,
        symbol: symbol,
        date: date,
        price: price,
        amount: amount
    }

    const handleName = (e, value) => {
        if (value !== null) {
            setName(value.substring(0, value.lastIndexOf('-') - 1));
        }
        else {
            setName('')
        }

    }
    const handleSymbol = (e, value) => {
        if (value !== null) {
            setSymbol(value.substring(value.lastIndexOf('-') + 2));
        }
        else {
            setSymbol('');
        }
        console.log(value);
    }

    const handleDate = (e) => {
        setDate(e.target.value);
    }

    const handlePrice = (e) => {
        setPrice(e.target.value);
    }

    const handleAmount = (e) => {
        setAmount(e.target.value);
    }

    const getCoins = useEffect(() => {
        let mounted = true;
        fetch('http://127.0.0.1:5000/api/v1/coins/list')

            .then(res => res.json())
            .then(items => {
                if (mounted) {
                    setCoinList(items)
                }
            })
        return () => mounted = false;
    }, [])

    console.log(data)

    return (

        <form>
            <Grid container >
                <Grid item xs={12} md={3}>
                    <Autocomplete
                        id="get-coin"
                        noOptionsText={'Coin not found...'}
                        options={coinList.map(item => (`${item.name} - ${item.symbol.toUpperCase()}`))}
                        onChange={(e, value) => { handleName(e, value); handleSymbol(e, value) }}
                        renderInput={(params) => (
                            <TextField {...params} label="Add coin" margin="normal" variant="outlined" />
                        )}
                    />
                </Grid>
                <Grid item xs={12} md={3}>
                    <TextField
                        onChange={handleDate}
                        label="Date"
                        variant="outlined"
                        style={{ width: 250 }}
                        margin="normal"
                    >
                    </TextField>

                </Grid>
                <Grid item xs={12} md={3}>
                    <TextField
                        onChange={handlePrice}
                        label="Price"
                        variant="outlined"
                        style={{ width: 250 }}
                        margin="normal"
                    >
                    </TextField>
                </Grid>
                <Grid item xs={12} md={3}>
                    <TextField
                        onChange={handleAmount}
                        label="Amount"
                        variant="outlined"
                        style={{ width: 250 }}
                        margin="normal"
                    >
                    </TextField>
                </Grid>
            </Grid>
        </form>
    );
}

The App.css contained a styling that I wasn't aware of. Changing/removing the inappropriate styling solved the off positioning.