Accessing onAccept() function in react cookie consent from custom button - reactjs

Question

I have a gatsby-react application which uses gatsby-plugin-gdpr-cookies and react-cookie-consent packages to enable and disable cookies and implement cookie consent bar. Here is the part of the component:
import CookieConsent from "react-cookie-consent";
import ReactGA from "react-ga";
import styled from "styled-components";
import { Button, Grid, Link, NoSsr, Typography } from "#material-ui/core";
import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies';
<CookieConsent
location="none"
cookieName="gatsby-gdpr-google-analytics"
disableStyles = {true}
onAccept={() => {
console.log("cookies accepted");
ReactGA.initialize("UA-XXXXXXXX-XX");
}}
>
<StyledBanner container justify="center" alignItems="center">
<Grid item container direction="column" lg={9} xs={12}>
<StyledText>
This website uses cookies.
</StyledText>
</Grid>
<Grid
container
item
justify="center"
alignItems="center"
lg={3}
xs={12}
wrap={"nowrap"}
>
<Button
variant="outlined"
*onClick={this.onAccept}*
>
I Disagree
</Button>
<Button
variant="outlined"
*onClick={this.onAccept}*
>
I Agree
</Button>
</Grid>
</StyledBanner>
</CookieConsent>
I would really like to trigger the onAccept function in CookieConsent so that my cookies can be enabled. The reason I would like use a custom button is so that the color scheme and theme of my app is constant without having to redesign within the default CookieConsent buttons.
If this is not possible I would also like to explore the customButtonProps prop within CookieConsent option but I having a very difficult time in making that work.
I wanted to know if one of these two options are possible and take a look at small implementation.