nested array returns as undefined

I use axios to fetch the data and pass the data as a prop to WatchHeader

export const WatchProfile = () => {
    const [watch, setWatch] = useState([]);

    let {id} = useParams();

    let config = {
        headers: {
            'Content-Type': 'application/json',
        }
    }

    useEffect(() => {
        axios.get(`http://localhost:8000/api/stock/${id}`, config)
        .then(response => {
            setWatch(response.data)
        })
        .catch(error => {
            console.log(error);
        })
    }, [])

    return (
        <Box>
            <WatchHeader watch={watch} />
            <LineChart/>
        </Box>
    )
}

I then use the data in my WatchHeader

function WatchHeader({watch}) {
    const theme = useTheme();
    const colors = tokens(theme.palette.mode);
    const navigate = useNavigate();

    const navigateHome = () => {
        navigate('/')
    }

    const model = watch && watch.model || '';
    const brand = watch && watch.brand || '';
    const model_number = watch && watch.model_number || '';
    const last_price = watch && watch.data[0] && watch.data[0].price || '';
    console.log(last_price);

    return (
        <Box>
            <Box display="flex" flexDirection="row" justifyContent="space-between" sx={{pl: 2, pt: 2, pr: 2}}>
                <Box display="flex" flexDirection="column">
                    <Box display="flex" flexDirection="row" textAlign="left">
                        <Typography variant="h6" fontWeight="600"
                                    sx={{color: colors.label[100]}}>{model}</Typography>
                        <Typography fontWeight="200"
                                    sx={{color: colors.label[200], pl: 2, pt: 0.7}}>{brand}</Typography>
                    </Box>
                    <Box>
                        <Typography fontWeight="200" textAlign="left"
                                    sx={{color: colors.gray[100], pl: 0, pt: 0.7}}>{model_number}</Typography>
                    </Box>
                </Box>
                <Box>
                    <MoreHorizIcon
                        aria-controls={open ? 'account-menu' : undefined}
                        aria-haspopup="true"
                        aria-expanded={open ? 'true' : undefined}
                        sx={{fill: '#65abe0', backgroundColor: colors.gray[500], borderRadius: '50%', p: 0.1, mr: 2}}/>
                    <CloseIcon onClick={navigateHome}
                               sx={{fill: '#636266', backgroundColor: colors.gray[500], borderRadius: '50%', p: 0.4}}/>
                </Box>
            </Box>
            <Divider variant="middle" flexItem sx={{backgroundColor: colors.seperator[100], mt: 0.7}}/>
            <Box>
                <Box display="flex" flexDirection="column" textAlign="left" sx={{pl: 2, pt: 0.7}}>
                    <Box display="flex" flexDirection="row">
                        <Typography fontWeight="500" sx={{color: colors.red[100], pl: 2, mt: 0.7}}>{last_price}</Typography>
                    </Box>
                    <Typography fontWeight="200" sx={{color: colors.label[200]}}>Past Year</Typography>
                    <Typography fontWeight="200" sx={{color: colors.label[200]}}>USD</Typography>
                </Box>
            </Box>
            <Divider variant="middle" flexItem sx={{backgroundColor: colors.seperator[100], mt: 0.7}}/>
            <Box display="flex" flexDirection="row" textAlign="left" sx={{pl: 2, pt: 1.5}}>
                <Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>1D</Typography>
                <Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>1W</Typography>
                <Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>1M</Typography>
                <Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>3M</Typography>
                <Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>6M</Typography>
                <Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>YTD</Typography>
                <Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>1Y</Typography>
            </Box>
        </Box>
    )

}

export default WatchHeader

All of the data returns except for the nested data. See the data structure below:

{
    "id": 290,
    "brand": "Rolex",
    "model": "Submariner",
    "model_number": "16610",
    "msrp": 6600,
    "data": [
        {
            "price": 10911.2,
            "date": "2024-08-14"
        },
        {
            "price": 10911.2,
            "date": "2024-08-13"
        }
    ]
}

The error that occurs is

TypeError: Cannot read properties of undefined (reading '0')

And the error is resulting from this line in my WatchHeader

const last_price = watch && watch.data[0] && watch.data[0].price || '';

Of note, if I delete the line of code above and save it will refresh the page with no errors and when I paste it back in it displays properly.