How can we use Refs in React-Redux?

I am working on an accordion project where I want to scroll button height by clicking one of the buttons. To accomplish this, I use Refs, and this working perfectly in React but I’ve to use Refs in React-Redux but this is not working.

Anyone can have suggestions about this problem, please Share that

Here Is my Reducer where I’ve scroll height of each button by clicking these:

import * as actionTypes from '../actions/actions';

const initialState = {
    active: false,
    height: '0px'
}
const reducer = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.ACTIVE_STATE:
            return {
                ...state,
                active: state.active === false ? true : false,
                height: state.active === true ? '0px' : `${this.content.current.scrollHeight}`   <---
            }
        default:
    }
    return state; 
}
export default reducer;

Here is my accordion component where I’ve created Refs:

import React, { Component, forwardRef } from 'react';
import { connect } from 'react-redux';
import * as actionTypes from '../store/actions/actions';

class Accordion extends Component {
    
    content = React.createRef();    <---
    render() {
        return (
            <div>
                <button className={`accordion ${this.props.accordions.active}`}
                onClick={this.props.expandAccordion} >
                    {this.props.title}
                </button>
                <div className="panel">
                    {this.props.content}
                </div>
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        accordions: state.data
    };
}
const mapDispatchToProps = (dispatch) => {
    return {
        expandAccordion: () => dispatch({type: actionTypes.ACTIVE_STATE})
    };
}
export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Accordion);

Every suggestion or opinion can help to me.

Feel free to share your idea’s